Next.jsを基礎から理解する

App RouterとPages Router

App Router はより柔軟なレイアウト管理やサーバーコンポーネントを活用した最新のルーティング方式で、新しいプロジェクトや複雑なページレイアウトが必要な場合に適しています。

ルートディレクトリ

App Routerはappディレクトリ、Pages Routerはpagesディレクトリを使います。

レイアウト管理

App Routerはlayout.tsxを各ディレクトリに配置してレイアウトをネストさせます。Pages Routerは、pages/_app.tsxでグローバルなレイアウトを定義します。

サーバーサイド vs クライアントサイド

App Routerはデフォルトでサーバーサイドレンダリングをサポートし、React Server Componentsを使用できます。Pages Routerはクライアントサイドレンダリングが主流で、必要に応じてgetServerSidePropsを使用します。

レンダリング方式

静的サイト生成 (Static Site Generation: SSG)

SSGは、ビルド時に静的なHTMLファイルを生成する方式です。このHTMLファイルはビルド時に生成され、すべてのリクエストに対してそのまま配信されます。APIのデータやコンテンツが頻繁に更新されない場合に有効です。

サーバーサイドレンダリング (Server-Side Rendering: SSR)

SSRは、リクエストごとにページがサーバーでレンダリングされ、HTMLがクライアントに配信される方式です。動的なデータが必要な場合に適しています。

インクリメンタル静的再生成 (Incremental Static Regeneration: ISR)

ISRは、静的サイト生成（SSG）の利点を活かしつつ、ページを一定間隔で再生成する方式です。これにより、リアルタイム性をある程度保ちながら静的生成のパフォーマンスを維持することができます。

クライアントサイドレンダリング (Client-Side Rendering: CSR)

CSRは、JavaScriptを使ってクライアント側でデータを取得し、ページを動的にレンダリングする方式です。初期ページはサーバーから配信されますが、追加のデータはクライアント側で取得して表示します。

VercelへのDeploy

vercelへのdeployであれば、超簡単です。

VercelにDeployしてもソースコードが更新されない

ブランチはmainからdevelopに変更されていますか？

私も全然更新されなくて最初はキャッシュを疑っていたのですが、別の理由でした。

デフォルトブランチを"develop"に変更していたのですが、Production Branchをmainからdevelopに変更していなかったのが原因でした。

変更前からDeploymentsでビルドが成功するかログを見ていたのですが、developブランチにpushしても毎回動いていたので気付きませんでした💦