Next.js とは？

Reactは画面を組み立てるライブラリだよ。Next.jsはReactを使い、URLのルーティング、サーバーでの描画や配信などを組み合わせるフレームワーク。Reactに画面づくりを任せつつ、Webアプリ全体の仕組みを用意するんだ

決まった規約があるよ。App Routerではapp/about/page.tsxを作ると/aboutのページになる。一方、Pages Routerではpages/about.tsxを使う。どんなファイルでもURLになるわけではなく、どちらのRouterかを確認するのが大切なんだ

SSRは要求に応じてサーバーで描画する方法、SSGはビルド時にページを生成する方法だよ。Next.jsでは静的な部分と動的な部分、キャッシュや再検証を組み合わせることもある。データがいつ必要か、どのくらい更新されるかを考えようね

App Routerのpageやlayoutは、既定ではServer Componentsだよ。ブラウザーでボタンのクリックや状態を扱う部分は、use clientで境界を示すClient Componentsを使う。ただしClient Componentも初回表示用のHTMLがサーバーで事前描画されるので、常にブラウザーだけで描く意味ではないんだ

ほかにも公開できるよ。Node.jsサーバーやDockerで動かす方法、静的ファイルに書き出す方法などがある。静的出力はサーバーが必要な機能に制限があるので、利用する機能に合わせて配置先と方式を選ぼうね