Nextjs 9.5~ の Static Generation について、サンプルコードを基に説明しています。

1. NEXT.JS(V9.5~) のSTATICNEXT.JS(V9.5~) のSTATIC
GENERATION についてGENERATION について
株式会社トレタKoji Uegaki(@kjugk1222)
2020/08/19
Next.js(v9.5~) のStatic Generation について


2. Next.js には、2 つのプリレンダリング⽅法がある。
Static Generation : HTML はビルド時に⽣成さ
れ、再利⽤される。
Server-side Rendering: HTML はリクエスト毎に
⽣成される。(キャッシュされない)
Next.js(v9.5~) のStatic Generation について


3. ページコンポーネントで特定の関数をexport する
ことで、プリレンダリングの挙動が変わる。
export する関数 プリレンダリング
⽅法
無し Static Generation
getStaticProps (&
getStaticPaths)
Static Generation
getServerSideProps
Server-side
Rendering
Next.js(v9.5~) のStatic Generation について


4. Static Generation のサンプル①
/posts でアクセスできる記事⼀覧ページ
// /pages/posts/index.js
// 時 回 実行
export const getStaticProps = async () => {
const res = await fetch("https://.../posts");
const posts = await res.json();
return {
props: {
posts,
},
};
};
//
Next.js(v9.5~) のStatic Generation について


5. Static Generation のサンプル②
/posts/[id] でアクセスできる記事詳細ページ。
// /pages/posts/[id].js
// 時 回 実行
export const getStaticPaths = async () => {
const res = await fetch("https://.../posts");
const posts = await res.json();
return {
paths: res.data.contents.map((p) => ({ params: { id: p.id
fallback: false,
};
};
// 時 paths 要素毎 実行 .
export const getStaticProps = async (context) => {
Next.js(v9.5~) のStatic Generation について


6. 疑問疑問
アプリケーションをビルドした後にページが変
更・削除・追加されたらどうするの? 🤔 毎回ビルド
しなおす?
=> Next.js 9.5 から導⼊された、Incremental Static
Regeneration の仕組みを使えばOK 👌
https://nextjs.org/docs/basic-features/data-
fetching#incremental-static-regeneration
Next.js(v9.5~) のStatic Generation について


7. 変更・削除変更・削除
で 秒 を指定する。
=> ページが前回キャッシュされてから指定した秒
数が経過していたら、更新をチェックする。更新
があればHTML を再⽣成する。
export const getStaticProps = async () => {
const res = await fetch("https://.../posts");
const posts = await res.json();
return {
props: {
posts,
revalidate: 20, // 前回 20秒以上経過 変
},
};
};
Next.js(v9.5~) のStatic Generation について


8. 動的パスの追加動的パスの追加
で を指定する。
=> ビルド時に存在しなかったパスがリクエストさ
れたら、HTML を⽣成する。
export const getStaticPaths = async () => {
const res = await fetch("https://.../posts");
const posts = await res.json();
return {
paths: posts.map((p) => ({ params: { id: p.id } })),
fallback: true, // 時 存在 指定 再生成
};
};
Next.js(v9.5~) のStatic Generation について


9. デモデモ
Next.js + Vercel で、ヘッドレスCMS の記事⼀覧デー
タをStatic Generation で表⽰するデモ
ソースコード
https://nextjs-ssg-demo.vercel.app/posts
https://github.com/kjugk/nextjs-ssg-
demo
Next.js(v9.5~) のStatic Generation について


10. まとめまとめ
Next.js では、特定の関数をexport すること
で、プリレンダリングの挙動が変わる。
何もexport しないか、getStaticProps をexport
すると、HTML をビルド時に⽣成できる。
Incremental Static Regeneration の仕組みを使う
と、ページの追加・変更にも動的に対応でき
る。
Next.js 9.5 以降を使うなら,できるだけStatic
Generation できるようにアプリケーションを設計
するのが良いと思います。
Next.js(v9.5~) のStatic Generation について
 