Next.js とは？

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

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

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

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