Penghalaan dalam Next.js – Cara Menggunakan Penghala Apl dalam Apl Seterusnya Anda-tutorial js-php.cn

Penghalaan dalam Next.js – Cara Menggunakan Penghala Apl dalam Apl Seterusnya Anda

Susan Sarandon

Lepaskan： 2025-01-17 04:33:12

asal

854 orang telah melayarinya

Routing in Next.js – How to Use App Router in Your Next Apps

Penghala Aplikasi Next.js 14 merevolusikan pengurusan laluan dengan sistem penghalaan berasaskan failnya dalam direktori app/. Pendekatan ini menggalakkan struktur aplikasi, modulariti dan prestasi yang lebih baik. Panduan ini menggariskan pelaksanaan Penghala Apl yang berkesan dalam projek Next.js anda.

Memahami Penghala Apl

Penghala Apl mentakrifkan semula definisi laluan. Struktur direktori dipetakan terus ke laluan URL. Folder dalam /app menjadi laluan, memudahkan reka letak bersarang, pengumpulan laluan dan pengambilan data, terutamanya dalam aplikasi yang lebih besar.

Menyediakan Penghala Apl

Buat projek Next.js (jika perlu): npx create-next-app@latest
Penghala Apl didayakan secara lalai dalam Next.js 14 melalui direktori /app. Tiada konfigurasi tambahan diperlukan.

Penghalaan Asas

Fail dan folder dalam /app secara automatik dipetakan ke laluan:

<code>app/
 ├── page.tsx           # Homepage ("/")
 ├── about/
 │    └── page.tsx      # About page ("/about")
 └── blog/
      ├── page.tsx      # Blog index ("/blog")
      └── [slug]/
           └── page.tsx # Dynamic blog posts ("/blog/[slug]")</code>

Salin selepas log masuk

Laluan Statik: app/about/page.tsx memetakan ke /about.
Laluan Dinamik: Tanda kurung persegi ([]) mentakrifkan segmen dinamik. app/blog/[slug]/page.tsx mengendalikan laluan seperti /blog/my-post.

Susun Letak dan Bersarang

Penghala Apl memudahkan penciptaan reka letak dan penggunaan semula.

Membuat Reka Letak:

Fail layout.tsx dalam folder digunakan pada semua halaman dan komponen dalam folder itu.

<code>app/
 ├── layout.tsx         # App-wide layout
 ├── about/
 │    ├── layout.tsx    # About page layout
 │    └── page.tsx      # About page content</code>

Salin selepas log masuk

<code class="language-javascript">// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1>My App</h1>
        {children}
      </body>
    </html>
  );
}</code>

Salin selepas log masuk

Laluan dan Reka Letak Bersarang:

Sarang reka letak, menyediakan UI yang konsisten merentas laluan bersarang.

<code>app/
 ├── dashboard/
 │    ├── layout.tsx         # Dashboard layout
 │    ├── page.tsx           # Dashboard home ("/dashboard")
 │    └── settings/
 │         └── page.tsx      # Dashboard settings ("/dashboard/settings")</code>

Salin selepas log masuk

Reka letak /dashboard/ digunakan pada kedua-dua /dashboard dan /dashboard/settings.

Kumpulan Laluan

Kumpulan laluan menyusun kod tanpa mengubah URL menggunakan folder dalam kurungan.

<code>app/
 ├── (dashboard)/
 │    ├── profile/
 │    │     └── page.tsx     # "/profile"
 │    ├── settings/
 │    │     └── page.tsx     # "/settings"</code>

Salin selepas log masuk

/profile dan /settings dikumpulkan di bawah (dashboard) untuk organisasi kod.

Tangkap-Semua Laluan

Kendalikan berbilang segmen URL dengan ... dalam nama fail: [...]/page.tsx menangkap /blog/a/b/c.

Keadaan Ralat dan Memuatkan

Next.js 14 menggunakan error.tsx dan loading.tsx untuk pengendalian ralat dan penunjuk pemuatan dalam laluan.

Pengambilan Data

Gunakan async/await atau cangkuk untuk pengambilan data sebelah pelayan terus dalam komponen.

<code class="language-javascript">// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <div>{JSON.stringify(data)}</div>;
}</code>

Salin selepas log masuk

Tindakan Pelayan

Kendalikan logik sisi pelayan (cth., penyerahan borang) dalam komponen menggunakan Tindakan Pelayan.

Pengerahan

Mengagihkan aplikasi Penghala Apl adalah sama dengan penggunaan standard Next.js. Vercel amat disyorkan untuk prestasi optimum.

Penghala Aplikasi Next.js 14 menawarkan pendekatan modular yang fleksibel untuk membina aplikasi berprestasi tinggi berskala dengan kod yang lebih bersih. Panduan ini menyediakan asas untuk memanfaatkan keupayaannya dalam projek anda.

Atas ialah kandungan terperinci Penghalaan dalam Next.js – Cara Menggunakan Penghala Apl dalam Apl Seterusnya Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!