cari

Rumah >hujung hadapan web >tutorial js >Penghalaan dalam Next.js – Cara Menggunakan Penghala Apl dalam Apl Seterusnya Anda

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

Susan Sarandon
Susan Sarandonasal
2025-01-17 04:33:12859semak imbas

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

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>

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>

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

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!

Static define if for catch Directory Error using map JS default this ui router Foundation
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Menyediakan Vite dengan TypeScript untuk Senarai Tugasan MudahArtikel seterusnya：Menyediakan Vite dengan TypeScript untuk Senarai Tugasan Mudah

Artikel berkaitan

Lihat lagi