Next.js: API 統合による動的ルーティング。

アイデア

Next.js は、動的ルート (/product/[id] など) をサポートするファイルベースのルーティング システムを提供します。これを動的データ取得と組み合わせて、柔軟でスケーラブルなアプリケーションを作成できます。これは、電子商取引の商品ページ、ユーザー プロフィール、または一意の識別子を持つコンテンツなどの場合に特に役立ちます。

例: 動的な商品ページ

1.動的ルートを設定する

/pages/product/ のようなフォルダー内に [id].tsx という名前のファイルを作成します。

ページ/製品/[id].tsx

2.動的ルートのデータを取得します

// pages/product/[id].tsx

import { GetStaticPaths, GetStaticProps } from 'next';

type ProductProps = {
  product: {
    id: string;
    name: string;
    description: string;
    price: number;
  };
};

export default function ProductPage({ product }: ProductProps) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

// Generate dynamic paths for the product pages
export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  // Map over the products to define paths
  const paths = products.map((product: { id: string }) => ({
    params: { id: product.id },
  }));

  return {
    paths, // Pre-render these paths at build time
    fallback: 'blocking', // Dynamically render other pages on request
  };
};

// Fetch product data for each page
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://api.example.com/products/${params?.id}`);
  const product = await res.json();

  // Pass the product data as props
  return {
    props: { product },
    revalidate: 10, // Revalidate every 10 seconds
  };
};

3.存在しないページの処理

ID が存在しない場合を処理するには、getStaticProps:
で notFound プロパティを返します。

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://api.example.com/products/${params?.id}`);

  if (res.status === 404) {
    return { notFound: true };
  }

  const product = await res.json();

  return {
    props: { product },
    revalidate: 10,
  };
};

このアプローチの主な特徴:

1. SEO フレンドリー: ページは完全な HTML で事前にレンダリングされるため、検索エンジンに最適です。

2. スケーラブル: フォールバック レンダリング (フォールバック: 'ブロッキング') を使用して、新しいデータのページを動的に生成できます。

3. リアルタイム更新: 再検証と組み合わせて、手動で展開しなくてもデータを確実に最新の状態に保ちます。

4. エラー処理: notFound を使用して 404 またはその他のエラーを適切に処理します。

この方法を使用すると、簡単に拡張できる、非常に動的で応答性の高い Web アプリケーションを構築できます。

以上がNext.js: API 統合による動的ルーティング。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。