Tajuk Dokumen Dinamik dalam Nextjs 15

Next.js 15 memudahkan pengurusan tajuk dokumen, membenarkan penggunaan teg <title> terus dalam JSX.

Cara ia berfungsi

Dalam Next.js 15, anda boleh memasukkan teg <title> terus dalam JSX. Next.js mengemas kini tajuk dokumen secara automatik apabila teg ini dipaparkan atau dikemas kini.

Sebab

Ciri ini memanfaatkan keupayaan pemaparan sebelah pelayan Next.js dan keupayaannya untuk menghidrat bahagian pelanggan komponen. Next.js mengemas kini tajuk dokumen dengan cekap apabila komponen dipaparkan semula disebabkan perubahan keadaan, tanpa memerlukan panggilan API tambahan atau manipulasi DOM manual.

Contoh pembilang tajuk dinamik

Berikut ialah contoh komponen pembilang yang mengemas kini UI dan tajuk dokumen:

<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>

Dalam contoh ini:

1. Kami menggunakan useState cangkuk untuk menguruskan keadaan kaunter.
Teg
2. <title> disertakan terus dalam JSX, menggunakan nilai kaunter semasa.
3. Apabila butang "Kenaikan" diklik, ia mengemas kini status kaunter.
4. Apabila komponen dipaparkan semula, kiraan yang dipaparkan dan tajuk dokumen dikemas kini.

Pendekatan ini memudahkan proses mengurus pengepala dokumen dinamik, menjadikannya lebih intuitif dan mengurangkan keperluan untuk kesan sampingan atau cangkuk tambahan.

Kelebihan utama

• Kesederhanaan: Tidak memerlukan cangkuk useEffect berasingan atau pustaka luaran untuk mengurus tajuk dokumen.
• Responsif: Tajuk dikemas kini secara automatik apabila keadaan komponen berubah.
• Serasi pemaparan bahagian pelayan: Berfungsi dengan lancar dengan keupayaan SSR Next.js.

Dengan memanfaatkan ciri baharu ini dalam Next.js 15, pembangun boleh mencipta antara muka pengguna yang lebih dinamik dan responsif dengan overhed minimum.

Sumber inspirasi untuk artikel

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

Atas ialah kandungan terperinci Tajuk Dokumen Dinamik dalam Nextjs 15. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!