Next.jsのApp Routerとは

Next.jsとは

wikipediaから引用

Next.js（ネクストジェイエス）は、Node.js上に構築されたオープンソースのWebアプリケーションフレームワークであり、サーバーサイドスクリプトや静的Webサイトの生成などの、ReactベースのWebアプリケーション開発を提供する。

ざっくり言うとwebアプリケーションのフレームワークである。

特徴

多彩なレンダリング方法

用途に合わせてレンダリングが可能である

1. SSR(Server Side Rendering): リクエストごとにサーバーでHTMLを生成。常に最新情報を表示したいページに最適。
2. SSG(Static Site Generation): ビルド時にHTMLを事前生成。表示速度が極めて速く、ブログ等に向いている。
3. ISR(Incremental Static Regeneration): 公開後もバックグラウンドで静的ページを一定間隔で更新。
4. PPR(Partial Prerendering): ページの一部は静的（高速表示）、動的な部分はストリーミングで表示する最新の最適化技術。
5. CSR（Client-Side Rendering）：「ブラウザ（クライアント側）でJavaScriptを実行してHTMLを構築する」レンダリング手法。

App Routetとは

フォルダ構造がそのままURLになるファイルベースルーティング。app ディレクトリ内のフォルダ構造がそのままURLパスになる。

• page.tsx: そのルートのUI（実際の画面）
• layout.tsx: 共通レイアウト（サイドバーやナビゲーションなど。ページ遷移しても再レンダリングされません）

サーバーコンポーネント（RSC）がデフォルト

App Router内のコンポーネントは、デフォルトでServer Componentsとして動作します。

メリット: ブラウザに送るJavaScriptの量を大幅に削減でき、ページ読み込みが速くなります。

データ取得: コンポーネント内で直接 async/await を使ってデータベースやAPIからデータを取得できます。

項目	Pages Router	App Router
コンポーネント	pages/	app/
データ取得	全てClient Component	Server Componentが標準
レイアウト管理	コンポーネント毎に定義が必要	layout.tsx でネスト可能