Maison >interface Web >js tutoriel >Titres de documents dynamiques dans NextJS 15

Titres de documents dynamiques dans NextJS 15

Patricia Arquette
Patricia Arquetteoriginal
2025-01-25 12:30:11555parcourir

Dynamic Document Titles in Nextjs 15

Next.js 15 simplifie la gestion des titres de documents, permettant l'utilisation des balises <title> directement dans JSX.

Comment ça marche

Dans Next.js 15, vous pouvez inclure la balise <title> directement dans JSX. Next.js met automatiquement à jour le titre du document lorsque cette balise est rendue ou mise à jour.

Raison

Cette fonctionnalité exploite les capacités de rendu côté serveur de Next.js et sa capacité à hydrater les composants côté client. Next.js met à jour efficacement le titre du document lorsque le composant est restitué en raison de changements d'état, sans avoir besoin d'appels d'API supplémentaires ni de manipulation manuelle du DOM.

Exemple de compteur de titres dynamique

Voici un exemple de composant de compteur qui met à jour l'interface utilisateur et le titre du document :

<code class="language-javascript">'use client'

import { useState } from 'react'

export default function CounterWithDynamicTitle() {
  const [count, setCount] = useState(0)

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1)
  }

  return (
    <>
      <title>Count: {count}</title>
      <div>
        <h1>Counter: {count}</h1>
        <button onClick={incrementCount}>Increment</button>
      </div>
    </>
  )
}</code>

Dans cet exemple :

  1. Nous utilisons useState hook pour gérer l'état du compteur.
  2. La balise
  3. <title> est incluse directement dans JSX, en utilisant la valeur actuelle du compteur.
  4. Lorsque vous cliquez sur le bouton "Incrémenter", il met à jour l'état du compteur.
  5. Lorsque le composant est restitué, le nombre affiché et le titre du document sont mis à jour.

Cette approche simplifie le processus de gestion des en-têtes de documents dynamiques, le rendant plus intuitif et réduisant le besoin d'effets secondaires ou de crochets supplémentaires.

Principaux avantages

  • Simplicité : Pas besoin d'un useEffect hook séparé ou d'une bibliothèque externe pour gérer les titres des documents.
  • Réactif : Le titre se met automatiquement à jour lorsque l'état du composant change.
  • Compatible avec le rendu côté serveur : Fonctionne de manière transparente avec les capacités SSR de Next.js.

En profitant de cette nouvelle fonctionnalité de Next.js 15, les développeurs peuvent créer des interfaces utilisateur plus dynamiques et réactives avec une surcharge minimale.

Source d'inspiration pour l'article

React's <title> dans Next.js 15 pic.twitter.com/wI39BOTM1a — Alex Sidorenko (@asidorenko_) 24 janvier 2025

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn