[Next.js]Next.jsでのHeadless CMS実装Tips #Next.js

Next.jsでHeadless CMSのサイトを実装するにおいて知っておくべきことをまとめました！
公式サイトをなぞった内容で解釈するためにまとめました。

##Next.jsでのルーティングについて

Next.jsでのルーティングはpagesディレクトリのディレクトリ or ファイル名によって決定する。
動的にルーティングさせる場合はpages/blog/[id].jsのようにページ名に角括弧を使用する。
例えば、pages/blog/[id].jsは下記のようなルートにマッチする。
pages/blog/abc
パスのパラメータはクエリパラメータとしてページに送られ、他のクエリパラメータと統合される仕組み。
pages/blog/abcとpages/blog/abc?id=xyzの場合はパスパラメータの方が優先される。

参考：
[Next.js]Pages
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/pages
[Next.js]動的なルーティング
https://nextjs-ja-translation-docs.vercel.app/docs/routing/dynamic-routes

##Next.jsのプリレンダリングについて
Next.js はそれぞれのページを事前にレンダリングする仕組み。パフォーマンスと SEO対策に優れている。
生成されたHTMLがブラウザで読み込まれるとそのページで最低限必要なJavascriptが実行される。

参考：
プリレンダリング
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/pages#プリレンダリング

###プリレンダリングの2つの方式
Next.jsでは静的生成(Static Generation)とサーバーサイドレンダリング(Server-side Rendering)の 2 つの方式が利用可能。
Next.js ではどちらのプリレンダリング方法を用いるかを、 ''それぞれのページに対して選ぶ'' ことができる。
また、クライアントサイドレンダリング(Crient-side Rendaring)も同様に用いることができる。（ページの特定部分をクライアント側の JavaScript で丸ごとレンダーすることも可能）

参考：
プリレンダリングの2つの方式
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/pages#プリレンダリングの2つの方式

##Next.jsでの静的生成（SSG）について

Next.js では、外部データの取得の有無に関わらずページの静的生成が可能。

###外部データの取得がある静的生成について

####ページのコンテンツが外部データに依存する場合
プリレンダリング時にデータを取得するために、Next.js では
getStaticProps と呼ばれる async 関数を同じファイルから export する。
この関数はビルド時に呼ばれ、取得されたデータをページのプリレンダリング時の props に渡す。

ポイント

getStaticProps はビルド時に実行されるため、リクエスト時でのみ利用可能なクエリパラメータや、静的 HTML を生成した時の HTTP ヘッダーのようなデータを受け取らない
getStaticProps はサーバー側でのみ実行され、ブラウザ用の JS バンドルにも含まれない。そのため、直接サーバー側のコードを書くことができる
ビルド時にプリレンダリングされると、ページの HTML ファイルだけでなくgetStaticProps の結果を持つ JSONファイルを生成する。クライアント側のページ遷移はgetStaticProps を呼び出さず、エクスポートされた JSON だけが使われる。

参考：
外部データの取得がある場合の静的生成
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/pages#外部データの取得がある場合の静的生成
getStaticPropsの仕様の詳細
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#技術詳細

####ページのパスが外部データに依存する場合
外部データに依存するパスを扱うために、Next.js では getStaticPaths という async 関数を exportする。

#####paths
どのパスがプリレンダリングされるかを決定する。例えば、pages/posts/[id].js というページの場合、下記のように定義する。

return {
  paths: [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ],
  fallback: ...
}

各 params の値はページ名で使われたパラメータと一致しなければならない。

#####fallback
フォールバックさせるかどうかのフラグを設定する。

fallback: falseの場合
getStaticPathsで返されないパスは全て404 ページとなる。
fallback: trueの場合
ビルド時に生成されなかったパスは 404 ページにはならない。代わりに、Next.js はそのようなパスへの最初のリクエストに対して「フォールバック」版のページを提供する。バックグラウンドで、Next.js はリクスエストされたパスの HTML と JSON を静的に生成する。これは getStaticProps の実行を含む。2回目以降のリクエストに対してはプリレンダリングされたページと同じように振る舞う。

fallback: trueは、全ページをプリレンダリングしたくても、ビルドに膨大な時間がかかってしまうようなに有効。

参考：
外部データの取得がある場合の静的生成
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/pages#外部データの取得がある場合の静的生成
getStaticPathsの仕様
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#getstaticpaths（静的生成）

ユーザーのリクエストよりも前にページの内容を準備できない場合は静的生成は推薦されないが、以下のような対応ができる。

クライアントサイドレンダリングと静的生成を併用する
　例）ReactフックSWRを用いる
　https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#swr
サーバーサイドレンダリングを用いる
（※「Next.jsでのサーバーサイドレンダリング（SSR）について」を参照）

##Next.jsでのサーバーサイドレンダリング（SSR）について

サーバーサイドレンダリングを用いると、ページの HTML がリクエストの度に生成される。
サーバーサイドレンダリングを使うためには、 getServerSideProps というasync 関数を export する必要がある。この関数はリクエストごとにサーバー側で呼ばれる。

参考：
サーバーサイドレンダリング
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/pages#サーバーサイドレンダリング
getServerSidePropsの仕様
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#getserversideprops（サーバーサイドレンダリング）