Maison >interface Web >js tutoriel >Titres de documents dynamiques dans 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 :
useState
hook pour gérer l'état du compteur. <title>
est incluse directement dans JSX, en utilisant la valeur actuelle du compteur. 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
useEffect
hook séparé ou d'une bibliothèque externe pour gérer les titres des documents. 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!