App Router入門｜Next.js最新ルーティングの基本

Next.js App Routerとは？新しい標準ルーティングを理解しよう

App Routerは、Next.js 13以降で導入された 新しいルーティング方式です。 従来のPages Routerとは設計思想が大きく異なり、 Server Componentsを前提とした構成が採用されています。

本カテゴリでは、appディレクトリの構造や page.tsx・layout.tsx・loading.tsxなどの役割を整理し、 App Routerの全体像を初心者向けに解説します。

Server Components時代のNext.js設計

App Routerでは、 Server ComponentsとClient Componentsを使い分けることで、 パフォーマンスと保守性を両立できます。 本カテゴリでは、どこをサーバーで処理し、 どこをクライアントで動かすべきかという判断基準も解説します。

このカテゴリで身につくこと

• App Routerの基本構造と考え方
• layout・template・error・loadingの役割
• Server ComponentsとClient Componentsの使い分け
• App Routerでのデータ取得とキャッシュ制御
• Pages Routerからの移行イメージ