【ねくすとじぇいえす】

Next.js とは?

💡 Reactに「本番対応の翼」をつけたフレームワーク
📌 このページのポイント
Next.js — SSR / SSG の仕組み SSR(サーバーサイドレンダリング) リクエスト サーバー HTML 毎回サーバーでHTMLを生成 SSG(静的サイト生成) ビルド時 生成済 CDN 事前にHTMLを生成して配信 Next.jsの特徴 ファイルベース ルーティング SSR/SSG/ISR 自動切替 APIルート 内蔵 Reactベース
Next.js(SSR/SSG)のイメージ
ひよこ ひよこ

Next.jsとReactって何が違うの?

ペンギン先生 ペンギン先生

ReactUI部品を作るための「ライブラリ」で、Next.jsはReactを使って本格的なWebサイトを作るための「フレームワーク」だよ。Reactだけだと自分でルーティングSSRの仕組みを用意しないといけないけど、Next.jsはそれが最初から揃っているんだ。

ひよこ ひよこ

ファイルベースルーティングって便利そうだけど、どういうこと?

ペンギン先生 ペンギン先生

たとえば「pages/about.tsx」というファイルを作ると、自動で「/about」というURLでアクセスできるようになるんだ。URLとファイルが1対1で対応するから、設定ファイルにルートを書く必要がなくて直感的だよ。

ひよこ ひよこ

SSRSSGって何が違うの?

ペンギン先生 ペンギン先生

SSRはリクエストのたびにサーバーHTMLを作って返す方法、SSGはビルド時にHTMLを事前に作っておく方法だよ。ブログみたいに内容があまり変わらないサイトはSSGが速くて向いていて、ユーザーごとに内容が変わるサービスはSSRが向いているんだ。

ひよこ ひよこ

App RouterとPages Routerって何?どっちを使えばいいの?

ペンギン先生 ペンギン先生

ここが中上級者でも混乱しやすいポイントだよ。Next.js 13から「App Router」という新しい仕組みが導入されて、従来の「Pages Router」と並立している状態なんだ。App RouterはReact Server Componentsという概念を使っていて、「どのコンポーネントサーバーで動くか・クライアントで動くか」を意識して設計しないといけない。この境界線の管理が思ったより複雑で、ベテランエンジニアでも「use client」をどこに置くべきか悩むことがある難しいポイントだよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Next.js」って出てきたら「ReactをベースにSSRSSGなどを使いやすくしたWebフレームワーク」と思えばだいたいOK!
📖 おまけ:英語の意味
「Next.js」 = 「次の」JavaScript(フレームワーク)
💬 Reactの「次の段階」として登場したフレームワークというニュアンスだよ
← 用語集にもどる