Cara Melakukan Penghalaan Apl dalam Next.js 14

Next.js 14 terus mempertingkatkan rangka kerjanya yang berkuasa, menyediakan pembangun dengan ciri teguh untuk membina aplikasi React. Salah satu aspek utama mana-mana aplikasi web ialah penghalaan, dan Next.js menjadikannya sangat mudah dan cekap. Dalam siaran ini, kami akan meneroka cara menyediakan dan menggunakan penghalaan apl dalam Next.js 14.

Pengenalan kepada Laluan Next.js

Next.js menggunakan sistem penghalaan berasaskan fail, yang bermaksud struktur direktori halaman anda menentukan laluan aplikasi anda. Setiap fail di dalam direktori halaman menjadi laluan.

Penghalaan Asas

Untuk mencipta laluan asas, anda hanya perlu menambah fail baharu pada direktori halaman. Contohnya, jika anda mencipta fail bernama about.js di dalam direktori halaman, ia akan tersedia secara automatik di /about.

Contoh:

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

Penghalaan Dinamik

Next.js juga menyokong penghalaan dinamik menggunakan kurungan ([]). Ini membolehkan anda membuat laluan dengan parameter dinamik.

Contoh:

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

Dalam contoh ini, fail bernama [id].js di dalam halaman/direktori produk mencipta laluan dinamik yang boleh diakses melalui /product/1, /product/2, dsb.

Laluan Bersarang

Laluan bersarang boleh dibuat dengan menambahkan folder di dalam direktori halaman. Setiap folder mewakili sebahagian daripada laluan URL.

Contoh:

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

Dalam persediaan ini, laluan /blog akan memaparkan index.js dan /blog/[slug] akan memaparkan [slug].js.

Laluan API

Next.js juga menyokong laluan API, membolehkan anda membuat titik akhir hujung belakang dalam aplikasi anda. Ini diletakkan dalam direktori halaman/api.

Contoh:

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

Fail ini mencipta titik akhir API di /api/hello yang bertindak balas dengan mesej JSON.

Menyesuaikan Penghala

Next.js 14 membenarkan lebih banyak penyesuaian dan strategi penghalaan lanjutan menggunakan pakej seterusnya/penghala. Anda boleh menavigasi antara halaman secara pemrograman dan mengendalikan senario penghalaan yang lebih kompleks.

Contoh:

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

Kesimpulan

Next.js 14 terus memudahkan dan meningkatkan pengalaman pembangun dengan sistem penghalaan yang berkuasa dan fleksibel. Sama ada anda memerlukan laluan statik, dinamik atau bersarang, Next.js memudahkan untuk menyediakan dan mengurus navigasi aplikasi anda.

Saya harap siaran ini membantu anda memulakan penghalaan dalam Next.js 14. Jika anda mempunyai sebarang soalan atau cadangan, sila tinggalkan ulasan di bawah!

Selamat mengekod!

---

Atas ialah kandungan terperinci Cara Melakukan Penghalaan Apl dalam Next.js 14. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!