Next.js: Penghalaan Dinamik dengan Penyepaduan API.

Ideanya

Next.js menyediakan sistem penghalaan berasaskan fail yang menyokong laluan dinamik (cth., /product/[id]). Anda boleh menggabungkan ini dengan pengambilan data dinamik untuk mencipta aplikasi yang fleksibel dan berskala. Ini amat berguna untuk kes seperti halaman produk e-dagang, profil pengguna atau sebarang kandungan dengan pengecam unik.

Contoh: Halaman Produk Dinamik

1. Sediakan Laluan Dinamik

Buat fail bernama [id].tsx di dalam folder seperti /pages/product/:

halaman/produk/[id].tsx

2. Ambil Data untuk Laluan Dinamik

// 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. Mengendalikan Halaman Tiada

Untuk mengendalikan kes di mana id tidak wujud, kembalikan sifat notFound dalam getStaticProps:

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

Ciri Utama Pendekatan Ini:

1. Mesra SEO: Halaman diprapaparkan dengan HTML penuh, menjadikannya hebat untuk enjin carian.

2. Boleh skala: Anda boleh menggunakan pemaparan sandaran (sandaran: 'menyekat') untuk menjana halaman secara dinamik untuk data baharu.

3. Kemas Kini Masa Nyata: Gabungkan dengan pengesahan semula untuk memastikan data kekal segar tanpa penggunaan manual.

4. Pengendalian Ralat: Tangani 404s atau ralat lain dengan baik dengan notFound.

Kaedah ini membolehkan anda membina aplikasi web yang sangat dinamik dan responsif yang berskala dengan mudah!

Atas ialah kandungan terperinci Next.js: Penghalaan Dinamik dengan Penyepaduan API.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!