Next.js でのルーティング – 次のアプリで App Router を使用する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Next.js でのルーティング – 次のアプリで App Router を使用する方法

Susan Sarandon

Jan 17, 2025 am 04:33 AM

Routing in Next.js – How to Use App Router in Your Next Apps

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>

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1 id="My-App">My App</h1>
        {children}
      </body>
    </html>
  );
}

ネストされたルートとレイアウト:

レイアウトはネストされ、ネストされたルート全体で一貫した 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 またはフックを使用します。

// 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>;
}

サーバーアクション

サーバーアクションを使用して、コンポーネント内のサーバー側ロジック (フォーム送信など) を処理します。

展開

App Router アプリケーションのデプロイは、標準の Next.js デプロイと同じです。最適なパフォーマンスを得るには Vercel を強くお勧めします。

Next.js 14 App Router は、よりクリーンなコードでスケーラブルで高性能なアプリケーションを構築するための柔軟なモジュール式アプローチを提供します。このガイドは、プロジェクトでその機能を活用するための基盤を提供します。

以上がNext.js でのルーティング – 次のアプリで App Router を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Java vs JavaScript：開発者向けの詳細な比較May 16, 2025 am 12:01 AM

Javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps、whilejavascriptisforinteractivewebpages.1）javaiscompiled、staticatically、andrunsonjvm.2）javascriptisisterted、dynamsornoded.3）

JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

See all articles