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

結論

Next.js 14 は、強力で柔軟なルーティング システムにより開発者のエクスペリエンスを簡素化し、強化し続けます。静的ルート、動的ルート、またはネストされたルートが必要な場合でも、Next.js を使用すると、アプリケーションのナビゲーションのセットアップと管理が簡単になります。

この投稿が Next.js 14 でルーティングを開始するのに役立つことを願っています。ご質問やご提案がございましたら、お気軽に以下にコメントを残してください。

コーディングを楽しんでください!

---

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