Comment effectuer le routage d'applications dans Next.js 14

Next.js 14 continue d'améliorer son puissant framework, offrant aux développeurs des fonctionnalités robustes pour créer des applications React. L'un des aspects clés de toute application Web est le routage, et Next.js le rend incroyablement simple et efficace. Dans cet article, nous explorerons comment configurer et utiliser le routage des applications dans Next.js 14.

Introduction au routage Next.js

Next.js utilise un système de routage basé sur des fichiers, ce qui signifie que la structure du répertoire de vos pages détermine les itinéraires de votre application. Chaque fichier du répertoire pages devient une route.

Routage de base

Pour créer un itinéraire de base, il vous suffit d'ajouter un nouveau fichier dans le répertoire pages. Par exemple, si vous créez un fichier nommé about.js dans le répertoire pages, il sera automatiquement disponible dans /about.

Exemple :

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

Routage dynamique

Next.js prend également en charge le routage dynamique à l'aide de crochets ([]). Cela vous permet de créer des itinéraires avec des paramètres dynamiques.

Exemple :

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

Dans cet exemple, un fichier nommé [id].js dans le répertoire pages/product crée une route dynamique accessible via /product/1, /product/2, etc.

Itinéraires imbriqués

Des itinéraires imbriqués peuvent être créés en ajoutant des dossiers dans le répertoire des pages. Chaque dossier représente une partie du chemin de l'URL.

Exemple :

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

Dans cette configuration, la route /blog rendra index.js et /blog/[slug] rendra [slug].js.

Itinéraires API

Next.js prend également en charge les routes API, vous permettant de créer des points de terminaison backend dans votre application. Ceux-ci sont placés dans le répertoire pages/api.

Exemple :

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

Ce fichier crée un point de terminaison API dans /api/hello qui répond par un message JSON.

Personnalisation du routeur

Next.js 14 permet davantage de personnalisation et de stratégies de routage avancées à l'aide du package next/router. Vous pouvez naviguer par programmation entre les pages et gérer des scénarios de routage plus complexes.

Exemple :

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

Conclusion

Next.js 14 continue de simplifier et d'améliorer l'expérience des développeurs grâce à son système de routage puissant et flexible. Que vous ayez besoin d'itinéraires statiques, dynamiques ou imbriqués, Next.js facilite la configuration et la gestion de la navigation de votre application.

J'espère que cet article vous aidera à démarrer avec le routage dans Next.js 14. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire ci-dessous !

Bon codage !

---

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!