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