Next.js : routage dynamique avec intégration API.

L'idée

Next.js fournit un système de routage basé sur des fichiers qui prend en charge les itinéraires dynamiques (par exemple, /product/[id]). Vous pouvez combiner cela avec la récupération dynamique de données pour créer des applications flexibles et évolutives. Ceci est particulièrement utile dans des cas tels que les pages de produits de commerce électronique, les profils d'utilisateurs ou tout contenu comportant des identifiants uniques.

Exemple : Pages produits dynamiques

1. Configurer l'itinéraire dynamique

Créez un fichier nommé [id].tsx dans un dossier comme /pages/product/ :

pages/produit/[id].tsx

2. Récupérer des données pour l'itinéraire dynamique

// 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. Gérer les pages inexistantes

Pour gérer les cas où l'identifiant n'existe pas, renvoyez une propriété notFound dans 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,
  };
};

Principales caractéristiques de cette approche :

1. Optimisé pour le référencement : les pages sont pré-rendues en HTML complet, ce qui les rend idéales pour les moteurs de recherche.

2. Évolutif : vous pouvez utiliser le rendu de secours (repli : 'blocage') pour générer dynamiquement des pages pour de nouvelles données.

3. Mises à jour en temps réel : combinez avec la revalidation pour garantir que les données restent à jour sans déploiements manuels.

4. Gestion des erreurs : gérez les erreurs 404 ou autres avec élégance avec notFound.

Cette méthode vous permet de créer des applications Web hautement dynamiques et réactives qui évoluent facilement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!