Next.js: Dynamisches Routing mit API-Integration.

Die Idee

Next.js bietet ein dateibasiertes Routingsystem, das dynamische Routen unterstützt (z. B. /product/[id]). Sie können dies mit dem dynamischen Datenabruf kombinieren, um flexible und skalierbare Anwendungen zu erstellen. Dies ist besonders nützlich für Fälle wie E-Commerce-Produktseiten, Benutzerprofile oder Inhalte mit eindeutigen Kennungen.

Beispiel: Dynamische Produktseiten

1. Richten Sie die dynamische Route ein

Erstellen Sie eine Datei mit dem Namen [id].tsx in einem Ordner wie /pages/product/:

pages/product/[id].tsx

2. Daten für die dynamische Route abrufen

// 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. Behandeln Sie nicht vorhandene Seiten

Um Fälle zu behandeln, in denen die ID nicht vorhanden ist, geben Sie eine notFound-Eigenschaft in getStaticProps zurück:

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

Hauptmerkmale dieses Ansatzes:

1. SEO-freundlich: Seiten werden mit vollständigem HTML vorgerendert, wodurch sie sich hervorragend für Suchmaschinen eignen.

2. Skalierbar: Sie können Fallback-Rendering (Fallback: „Blockieren“) verwenden, um Seiten für neue Daten dynamisch zu generieren.

3. Echtzeit-Updates: Kombinieren Sie es mit revalidate, um sicherzustellen, dass die Daten ohne manuelle Bereitstellungen aktuell bleiben.

4. Fehlerbehandlung: Behandeln Sie 404-Fehler oder andere Fehler ordnungsgemäß mit notFound.

Mit dieser Methode können Sie hochdynamische und reaktionsfähige Webanwendungen erstellen, die sich leicht skalieren lassen!

Das obige ist der detaillierte Inhalt vonNext.js: Dynamisches Routing mit API-Integration.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!