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

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 に渡す。

ポイント
1. `getStaticProps `はビルド時に実行されるため、リクエスト時でのみ利用可能なクエリパラメータや、静的 HTML を生成した時の HTTP ヘッダーのようなデータを受け取らない
2. `getStaticProps `はサーバー側でのみ実行され、ブラウザ用の JS バンドルにも含まれない。そのため、直接サーバー側のコードを書くことができる
3. ビルド時にプリレンダリングされると、ページの 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（サーバーサイドレンダリング）