Panduan praktikal - Berhijrah ke Penghala Apl Next.js

Dengan keluaran Next.js App Router, ramai pembangun tidak sabar-sabar untuk memindahkan projek sedia ada mereka. Dalam siaran ini, saya akan berkongsi pengalaman saya memindahkan projek ke Penghala Apl Next.js, termasuk cabaran utama, perubahan dan cara anda boleh menjadikan proses itu lebih lancar.

Ini adalah pendekatan tambahan, anda boleh menggunakan penghala halaman dan penghala aplikasi secara serentak.

Mengapa Berhijrah ke Penghala Apl Next.js?

Penghala Apl memperkenalkan beberapa kelebihan:

• Penghalaan yang Diperbaiki: Penghalaan berasaskan sistem fail yang lebih bersih.
• Penambahan Sebelah Pelayan (SSR): Pengendalian data sebelah pelayan yang lebih cekap.
• Pengendalian Meta: Pengurusan SEO yang dipermudahkan.
• Prestasi yang Dipertingkat: Pengoptimuman terbina dalam untuk pelbagai komponen.

Dengan berhijrah, anda boleh membuktikan aplikasi anda pada masa hadapan untuk memanfaatkan ciri Next.js terkini.

Langkah-langkah untuk Berhijrah ke Penghala Apl

• Kemas kini Ketergantungan

Langkah pertama ialah memastikan Next.js anda dan kebergantungan yang berkaitan dikemas kini. Jalankan arahan berikut untuk memasang versi terkini Next.js dan React:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• Struktur Folder Apl

Penghala Apl bergantung pada direktori apl baharu untuk mengurus laluan, metadata dan reka letak. Begini cara menyusunnya:

Folder Apl: Alihkan halaman anda ke dalam folder apl. Setiap laluan kini mempunyai folder khusus sendiri yang mengandungi fail page.tsx.

Reka letak: Tambahkan fail layout.tsx untuk menentukan reka letak bagi bahagian tertentu apl anda. Ini amat berguna untuk mengendalikan komponen kongsi seperti bar navigasi atau pengaki.

• Perubahan Penghala

Salah satu perubahan yang paling ketara ialah penggantian next/router dengan next/navigation untuk fungsi penghalaan dan navigasi.

Gantikan semua import seterusnya/penghala dengan seterusnya/navigasi.
Kemas kini fungsi seperti useRouter dengan setara baharu, seperti usePathname, useSearchParams dan useRouter() jika sesuai.

• Kod Sebelah Pelayan Refactor

getServerSideProps dan getStaticProps tidak digunakan dalam Penghala Apl.
Gunakan komponen pelayan tak segerak atau tindakan pelayan untuk pengambilan data dalam halaman sebelah pelayan.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• Mengendalikan Komponen Sebelah Pelanggan

Komponen pelanggan:
Mana-mana komponen yang menggunakan cangkuk React, API penyemak imbas atau interaksi pengguna mesti ditandakan dengan 'pengguna klien'. Ini memberitahu Next.js untuk memaparkannya pada sisi pelanggan.

Komponen Pelayan:
Mana-mana komponen yang tidak memerlukan interaksi dengan penyemak imbas boleh kekal sebagai komponen pelayan. Ini lebih cekap kerana ia mengelakkan penghantaran JavaScript yang tidak perlu kepada pelanggan.

• Mengendalikan Perpustakaan Luar

Jika anda menggunakan perpustakaan luaran seperti React Query, AntDesign atau pembingkai dll. Anda perlu mengemas kininya dan membuat perubahan mengikut keperluan. Tidak boleh memasukkan semua perubahan dalam blog ini. Walaupun perubahan disebut dalam dokumentasi mereka.

Cabaran Biasa Semasa Migrasi

• Pengendalian Acara Penghala:

Dengan perubahan daripada seterusnya/penghala kepada seterusnya/navigasi, pengendalian acara penghala mungkin memerlukan pendekatan yang berbeza.
Pastikan anda mengemas kini mana-mana pendengar acara penghala atau cangkuk dengan sewajarnya.

• Isu Anjakan Reka Letak:

Apabila memindahkan halaman dengan reka letak yang kompleks (terutamanya yang mempunyai animasi), anda mungkin melihat peralihan reka letak. Tambahkan pemegang tempat atau kekalkan penjajaran yang betul pada bahagian pelayan itu sendiri untuk mengelakkan peralihan reka letak.

• Kemas Kini Komponen Imej dan Pautan:

Penghala Apl memperkenalkan perubahan pada komponen Imej dan Pautan.
Gunakan codemods untuk mengemas kini komponen secara automatik.
Untuk komponen Imej, alih keluar atribut yang tidak digunakan seperti responsif.

• Animasi

Komponen berkaitan animasi seperti fail pembingkai, swiper dan lootie perlu disimpan di sebelah pelanggan.

Kesimpulan

Berhijrah ke Penghala Apl Next.js disertakan dengan cabarannya tetapi juga dengan peningkatan ketara dalam prestasi, kebolehskalaan dan fleksibiliti. Dengan membahagikan migrasi kepada bahagian yang boleh diurus (peringkat apl, peringkat halaman dan kemas kini ciri), saya dapat menangani setiap perubahan secara sistematik.

Beri tahu saya jika anda mempunyai sebarang soalan atau petua daripada penghijrahan anda sendiri!

Atas ialah kandungan terperinci Panduan praktikal - Berhijrah ke Penghala Apl Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!