ホームページ >ウェブフロントエンド >jsチュートリアル >Next.js でのルーティング – 次のアプリで App Router を使用する方法
Next.js でのルーティング – 次のアプリで App Router を使用する方法
- Susan Sarandonオリジナル
- 2025-01-17 04:33:12859ブラウズ
Next.js 14 の App Router は、app/ ディレクトリ内のファイルベースのルーティング システムによりルート管理に革命をもたらします。このアプローチにより、アプリケーションの構造、モジュール性、パフォーマンスが向上します。 このガイドでは、Next.js プロジェクトでの効果的な App Router の実装について概説します。
App Router を理解する
App Router はルート定義を再定義します。 ディレクトリ構造は URL パスに直接マッピングされます。 /app 内のフォルダーはルートになり、特に大規模なアプリケーションで、ネストされたレイアウト、ルートのグループ化、データのフェッチが簡素化されます。
App Router のセットアップ
- Next.js プロジェクトを作成します (必要な場合):
npx create-next-app@latest - App Router は、Next.js 14 では
/appディレクトリ経由でデフォルトで有効になります。追加の構成は必要ありません。
基本ルーティング
/app 内のファイルとフォルダーはルートに自動的にマッピングされます:
<code>app/
├── page.tsx # Homepage ("/")
├── about/
│ └── page.tsx # About page ("/about")
└── blog/
├── page.tsx # Blog index ("/blog")
└── [slug]/
└── page.tsx # Dynamic blog posts ("/blog/[slug]")</code>
-
静的ルート:
app/about/page.tsxは/aboutにマップされます。 -
動的ルート: 角括弧 (
[]) は動的セグメントを定義します。app/blog/[slug]/page.tsxは/blog/my-postのようなルートを処理します。
レイアウトとネスト
App Router により、レイアウトの作成と再利用が簡素化されます。
レイアウトの作成:
フォルダー内の layout.tsx ファイルは、そのフォルダー内のすべてのページとコンポーネントに適用されます。
<code>app/ ├── layout.tsx # App-wide layout ├── about/ │ ├── layout.tsx # About page layout │ └── page.tsx # About page content</code>
<code class="language-javascript">// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1>My App</h1>
{children}
</body>
</html>
);
}</code>
ネストされたルートとレイアウト:
レイアウトはネストされ、ネストされたルート全体で一貫した UI を提供します。
<code>app/
├── dashboard/
│ ├── layout.tsx # Dashboard layout
│ ├── page.tsx # Dashboard home ("/dashboard")
│ └── settings/
│ └── page.tsx # Dashboard settings ("/dashboard/settings")</code>
/dashboard/ レイアウトは /dashboard と /dashboard/settings の両方に適用されます。
ルートグループ
ルート グループは、括弧で囲まれたフォルダーを使用して、URL を変更せずにコードを整理します。
<code>app/ ├── (dashboard)/ │ ├── profile/ │ │ └── page.tsx # "/profile" │ ├── settings/ │ │ └── page.tsx # "/settings"</code>
/profile と /settings は、コード編成のために (dashboard) の下にグループ化されています。
キャッチオールルート
ファイル名に ... を含む複数の URL セグメントを処理します: [...]/page.tsx は /blog/a/b/c をキャプチャします。
エラーと読み込み状態
Next.js 14 は、ルート内のエラー処理とインジケーターの読み込みに error.tsx と loading.tsx を使用します。
データの取得
サーバー側のデータをコンポーネントで直接取得するには、async/await またはフックを使用します。
<code class="language-javascript">// app/dashboard/page.tsx
export default async function DashboardPage() {
const data = await fetch('https://api.example.com/data').then(res => res.json());
return <div>{JSON.stringify(data)}</div>;
}</code>
サーバーアクション
サーバー アクションを使用して、コンポーネント内のサーバー側ロジック (フォーム送信など) を処理します。
展開
App Router アプリケーションのデプロイは、標準の Next.js デプロイと同じです。 最適なパフォーマンスを得るには Vercel を強くお勧めします。
Next.js 14 App Router は、よりクリーンなコードでスケーラブルで高性能なアプリケーションを構築するための柔軟なモジュール式アプローチを提供します。 このガイドは、プロジェクトでその機能を活用するための基盤を提供します。
以上がNext.js でのルーティング – 次のアプリで App Router を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。