Next.js 14 でアプリのルーティングを行う方法-jsチュートリアル-php.cn

Next.js 14 でアプリのルーティングを行う方法

WBOY

リリース： 2024-08-06 12:43:03

オリジナル

704 人が閲覧しました

How to Do App Routing in Next.js 14

Next.js 14 は強力なフレームワークを強化し続け、開発者に React アプリケーションを構築するための堅牢な機能を提供します。 Web アプリケーションの重要な側面の 1 つはルーティングですが、Next.js を使用するとそれが驚くほどシンプルかつ効率的になります。この投稿では、Next.js 14 でアプリのルーティングを設定して使用する方法を説明します。

Next.js ルーティングの概要

Next.js はファイルベースのルーティングシステムを使用します。つまり、ページディレクトリの構造によってアプリケーションのルートが決まります。ページディレクトリ内の各ファイルがルートになります。

基本的なルーティング

基本的なルートを作成するには、新しいファイルをページディレクトリに追加するだけです。たとえば、pages ディレクトリ内に about.js という名前のファイルを作成すると、そのファイルは /about.

で自動的に利用可能になります。

例:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

ログイン後にコピー

動的ルーティング

Next.js は、括弧 ([]) を使用した動的ルーティングもサポートしています。これにより、動的パラメータを使用してルートを作成できます。

例:

// pages/product/[id].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

ログイン後にコピー

この例では、pages/product ディレクトリ内の [id].js という名前のファイルが、/product/1、/product/2 などを介してアクセスできる動的ルートを作成します。

ネストされたルート

ネストされたルートは、pages ディレクトリ内にフォルダーを追加することで作成できます。各フォルダーは URL パスの一部を表します。

例:

// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog Home</h1>
    </div>
  );
}

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
}

ログイン後にコピー

この設定では、/blog ルートはindex.js をレンダリングし、/blog/[slug] は [slug].js をレンダリングします。

APIルート

Next.js は API ルートもサポートしているため、アプリケーション内にバックエンドエンドポイントを作成できます。これらは、pages/api ディレクトリに配置されます。

例:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

ログイン後にコピー

このファイルは、JSON メッセージで応答する API エンドポイントを /api/hello に作成します。

ルーターのカスタマイズ

Next.js 14 では、next/router パッケージを使用して、より多くのカスタマイズと高度なルーティング戦略が可能です。プログラムでページ間を移動し、より複雑なルーティングシナリオを処理できます。

例:

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About Page</button>
    </div>
  );
}

ログイン後にコピー