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>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 までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1676

CakePHP チュートリアル

1429

Laravel チュートリアル

1333

PHP チュートリアル

1278

C# チュートリアル

1257

Related knowledge

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

Python vs. JavaScript：ユースケースとアプリケーションと比較されます Apr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック