Slide 1

Slide 1 text

Next.jsで整える。デザインとロジックの分離 Page Extensionsの活用 2021/09/30 by hanetsuki

Slide 2

Slide 2 text

hanetsuki ● 業界4年目のフロントエンドエンジニア ● 最初はHTMLとかCSSとか触ってた ● 最近は Gatsby とか Next とかすごく触ってる ● 最近の悩みはスタイル実装する上での技術選定 簡単に自己紹介

Slide 3

Slide 3 text

Next.jsちょっと触ったことあるよ!って人向けになっているかもしれません。すみません

Slide 4

Slide 4 text

経緯

Slide 5

Slide 5 text

● メディアサイトを作成することになった ○ デザイナーコーダー × 1人 ○ フロントエンド × 1人(ワイ) 経緯

Slide 6

Slide 6 text

● メディアサイトを作成することになった ○ デザイナーコーダー × 1人 ○ フロントエンド × 1人(ワイ) ● Next.jsとmicroCMSでSSGしてvercelにデプロイ ○ 私的、Jamstack王道構成ですね 経緯

Slide 7

Slide 7 text

● メディアサイトを作成することになった ○ デザイナーコーダー × 1人 ○ フロントエンド × 1人(ワイ) ● Next.jsとmicroCMSでSSGしてvercelにデプロイ ○ 私的、Jamstack王道構成ですね ● 「Jsわからんです」「抵抗感あります」 ○ それもそうだよね〜 経緯

Slide 8

Slide 8 text

getStaticProps getStaticPaths CSS NextPage 一つのファイルに色々な処理が記載されていて見通しが悪い ...

Slide 9

Slide 9 text

getStaticProps getStaticPaths CSS NextPage 一つのファイルに色々な処理が記載されていて見通しが悪い ... パンくずリスト ページネーション

Slide 10

Slide 10 text

getStaticPaths getStaticProps NextPage CSS なんらかの方法で・いい感じに・分離できたらいいなと思いました ^^

Slide 11

Slide 11 text

● デザイナーコーダーが触るViewの部分 ● フロントエンドが触るロジックの部分 ● これを目指していきます^^ 経緯

Slide 12

Slide 12 text

Page Extensionsの活用

Slide 13

Slide 13 text

https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions ● pages/ 配下のページとして読み込みされるファイルの拡張子などをカスタマイズすることがで きるオプション。next.config.js にオプションとして渡すことができる。 ● これにpage.tsxという設定を加えました。 ○ index.page.tsx, _app.page.tsx ● 限定的なファイルのみページとして読み込むようになりました。 Page Extensionsの活用

Slide 14

Slide 14 text

pages/blog/[contentId].page.tsx View Logic Logic

Slide 15

Slide 15 text

pages/blog/[contentId].page.tsx View Logic Logic ここからLogicを外に出します。

Slide 16

Slide 16 text

● .page.tsと同じ階層に.hook.tsを作成します。 ○ page/index.page.tsx だった場合、pages/index.hook.ts ○ page/blog/[contentId].page.tsx だった場合、pages/blog/[contentId].hook.ts ○ こんな感じ^^ ● 先程の page/blog/[contentId].page.tsx を例に .hook.ts にロジックを移し替えてみます。 ロジックの外出し.hook.tsの作成

Slide 17

Slide 17 text

pages/blog/[contentId].hook.tsx

Slide 18

Slide 18 text

pages/blog/[contentId].page.tsx ※ getStaticPropsとgetStaticPathsは、エントリーファイルである .page.tsxで import/export を実施必要がありま す。

Slide 19

Slide 19 text

● pageExtensionsでページとなるファイルの拡張子を制限することができる ○ そのおかげで同階層に.hook.tsというファイルを作成することができる ● ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 ● ❌ 同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ

Slide 20

Slide 20 text

ご静聴ありがとうございました。