Jadual Kandungan[Sembunyi][Tunjukkan]
Apabila memilih perpustakaan atau rangka kerja perisian, pengalaman pembangun biasanya diambil kira.
Apabila saya menyebut "pengalaman pembangun," saya merujuk kepada cara pembangun sebenarnya melakukan kerja. Pembangun memilih perpustakaan atau rangka kerja yang menyeronokkan untuk digunakan.
Ini adalah salah satu sebab utama mengapa kami kini mempunyai perpustakaan dan rangka kerja yang paling popular. Sebagai pembangun, kami tidak perlu bermula dari awal apabila terdapat alatan sedia ada yang dicipta untuk membantu kami dengan tugasan kami.
Rangka kerja ialah kepingan perisian yang dicipta dan digunakan oleh pembangun untuk membina aplikasi, dan NextJS adalah salah satu daripadanya.
Dalam siaran ini, kami akan membincangkan Nextjs, ciri utamanya dan cara kami boleh menggunakannya untuk membina aplikasi. Jom masuk terus.
Apakah Next.js?
Seterusnya.js ialah rangka kerja JavaScript untuk membina halaman web statik dan aplikasi dalam talian berasaskan React dengan cepat dan mudah. Ia membolehkan anda mereka bentuk aplikasi Web yang hebat untuk pelbagai platform, termasuk Windows, Linux dan Mac.
Anda harus biasa dengan rangka kerja Next.js jika anda mempunyai pengetahuan minimum dengan reaksi dan ingin mengetahui lebih lanjut tentang ekosistem tindak balas.
Walaupun Next.js disertakan dengan semua yang anda perlukan untuk bermula, anda boleh memilih antara NPM dan Benang, JavaScript dan TypeScript, CSS dan SCSS, eksport statik dan penggunaan tanpa pelayan.
Ciri-ciri
- Penghalaan dilakukan secara automatik – Anda tidak perlu mengkonfigurasi apa-apa kerana mana-mana URL dipetakan ke sistem fail, ke fail dalam folder halaman (anda mempunyai pilihan penyesuaian, sudah tentu).
- Komponen Fail Tunggal – Mudah untuk menambah gaya yang diskop pada komponen menggunakan styled-jsx, yang disepadukan sepenuhnya dan dihasilkan oleh pasukan yang sama.
- Memuatkan Semula Kod Hangat – Apabila Next.js mengesan pengubahsuaian yang disimpan pada cakera, ia memuatkan semula halaman.
- Komponen Dinamik – Anda boleh memuatkan modul JavaScript dan Komponen React secara dinamik.
- Eksport statik – Next.js membolehkan anda mengeksport tapak statik sepenuhnya daripada apl anda dengan arahan eksport seterusnya.
- Keserasian dengan Persekitaran – Next.js menyepadukan dengan lancar dengan ekosistem JavaScript, Node dan React.
- Memisahkan Kod Secara Automatik – Hanya perpustakaan dan JavaScript yang diperlukan digunakan untuk memaparkan halaman. Daripada mencipta satu fail JavaScript yang mengandungi semua kod apl, Next.js membahagikan apl itu kepada banyak sumber secara bijak.
Bagaimana untuk mencipta aplikasi next.js?
Pemasangan
Anda boleh menggunakan perintah npx nod untuk memasang dan membina projek Next.js.
Ini akan menjana folder dan semua fail, konfigurasi dan item lain yang diperlukan untuk menjalankan projek Next.js.
Anda boleh melancarkan apl setelah ia dijana.
Halaman & Penghalaan
Untuk mengendalikan laluan dengan Next.js, kami tidak perlu menggunakan rangka kerja penghalaan. Penghalaan dengan Next.js adalah mudah untuk disediakan. Apabila anda menggunakan arahan create-next-app untuk membina apl Next.js baharu, apl itu mencipta folder yang dipanggil 'halaman' secara lalai.
Folder 'halaman' ini ialah tempat anda mengekalkan laluan anda. Akibatnya, setiap fail komponen tindak balas dalam subdirektori akan dikendalikan sebagai laluan yang berasingan.
Sebagai contoh, jika folder mengandungi fail tersebut:
- indeks.js
- about.js
- aricles.js
Fail ini akan diubah secara automatik dalam tiga cara:
- Halaman indeks localhost/index
- Halaman perihal localhost/about
- Halaman blog localhost/artikel
Contoh halaman about.js ditunjukkan di bawah. Tiada apa-apa yang disediakan tentang halaman, seperti yang anda lihat. Ia hanyalah komponen berfungsi React standard.
laluan
Untuk membuat laluan bersarang, anda mesti mewujudkan subfolder terlebih dahulu. Contohnya: halaman/artikel. Cipta komponen tindak balas 'contact.js' anda dalam folder itu dan ia akan menjana halaman localhost/articles/contact.
Jika anda meletakkan satu fail dalam pages/articles.js dan satu lagi dalam pages/articles/index.js. Kedua-duanya mencerminkan laluan localhost/blog yang sama. Dalam situasi ini, Next.js hanya akan memaparkan fail article.js. Bagaimana pula dengan laluan dinamik, di mana setiap catatan blog mempunyai laluannya sendiri:
- localhost/blog/artikel pertama
- localhost/blog/-artikel kedua
Menggunakan notasi kurungan, anda boleh menentukan laluan dinamik dalam Next.js. Contohnya: halaman/artikel/[slug].js
Pautan Laluan
Anda kini telah melengkapkan laluan pertama anda. Saya rasa anda bertanya cara menyambungkan halaman ke laluan tersebut. Anda memerlukan 'seterusnya/pautan' untuk berbuat demikian.
Berikut ialah contoh halaman utama yang mengandungi pautan ke halaman Perihal:
Jika anda ingin menggayakan pautan, gunakan sintaks berikut:
Ubah hala Laluan
Bagaimana jika anda perlu memaksa ubah hala ke halaman tertentu? Sebagai contoh, apabila butang ditekan? Anda boleh mencapai ini dengan menggunakan 'router.push':
SEO
Halaman dalam aplikasi web memerlukan elemen meta (kepala) sebagai tambahan kepada data dalam badan HTML. Ini memerlukan pemasangan keperluan tambahan bernama React Helmet dalam Aplikasi React.
Kami boleh menggunakan komponen Head from next/head in Next untuk menambahkan metadata ke halaman web kami dengan mudah yang akan dipaparkan dalam hasil carian dan benam:
Komponen
Anda selalunya perlu membangunkan komponen atau fail susun atur. Sebagai contoh, komponen yang menjadikan bar navigasi. Kami baru sahaja menggunakan folder halaman setakat ini. Bagaimana jika komponen anda tidak dimaksudkan untuk menjadi halaman laluan?
Anda tidak mahu pengguna menavigasi ke halaman seperti localhost/navbar. Jika anda meletakkan komponen Navbar.js dalam folder halaman, itulah yang akan berlaku. Apakah yang perlu anda lakukan dalam situasi tersebut?
Simpan semua komponen 'bukan halaman' anda dalam folder berasingan. Kebanyakan projek Next.js menggunakan 'komponen' moniker, dan folder ini dijana dalam folder akar projek anda.
Komponen kepala
Muatan halaman awal diberikan oleh Next.js pada bahagian pelayan. Ia melakukan ini dengan mengubah suai HTML halaman anda. Bahagian pengepala disertakan.
Komponen Next.js Head digunakan untuk memberikan teg bahagian pengepala seperti tajuk dan meta. Komponen Ketua digunakan dalam contoh komponen Reka Letak ini.
Buat halaman 404 tidak ditemui
Ia boleh dilakukan untuk membuat halaman ralat 404 anda sendiri. Anda mungkin ingin menyesuaikan mesej atau menambah reka bentuk halaman anda sendiri. Dalam folder halaman, cipta fail 404.js.
Apabila ralat 404 berlaku, Next.js akan mengubah hala secara automatik ke halaman ini. Berikut ialah contoh halaman 404 yang diperibadikan:
Pengambilan Data dari bahagian pelayan
Daripada memuat turun data pada bahagian klien, Next.js membenarkan anda menjalankan populasi data awal, yang membayangkan menghantar halaman dengan data yang telah diisi daripada pelayan.
Anda mempunyai dua pilihan untuk melaksanakan pengambilan data sebelah pelayan:
- Data hendaklah diambil pada setiap permintaan.
- Hanya dapatkan data sekali sahaja sepanjang proses pembinaan (tapak statik)
Ambil data pada setiap permintaan
Kaedah getServerSideProps digunakan untuk membuat bahagian pelayan setiap permintaan. Fungsi ini boleh disertakan pada penghujung fail komponen anda. Next.js akan mengisi prop komponen anda secara automatik dengan objek getServerSideProps jika fungsi itu terdapat dalam fail komponen anda.
Ambil data pada masa binaan
Kaedah getStaticProps digunakan untuk membuat bahagian pelayan pada masa binaan. Fungsi ini boleh disertakan pada penghujung fail komponen anda. Kaedah ini menjalankan kod pelayan dan menghantar permintaan GET kepada pelayan, tetapi hanya sekali apabila projek kami selesai.
Mengapa anda perlu belajar Next.js?
Salah satu sebab untuk ini adalah kerana Next.js dibina di atas React, kit alat pembangunan bahagian hadapan untuk mencipta antara muka pengguna itulah pilihan kegemaran saya untuk mereka bentuk aplikasi web.
Tetapi ia tidak mencukupi jika Next.js tidak mahir dalam apa yang dilakukannya... betul?
Jadi, apa sebenarnya yang dilakukannya?
Kita mesti terlebih dahulu menentukan beberapa konsep untuk memahaminya. Next.js mendapat populariti kerana ia menyelesaikan masalah yang dihadapi oleh banyak pembangun web dengan apl web sebelah klien (dalam penyemak imbas). Aplikasi Satu Halaman (SPA) ini mempunyai pengalaman yang lebih baik kerana mereka tidak memerlukan pengguna untuk memuatkan semula halaman dan membenarkan lebih banyak interaktiviti.
Walau bagaimanapun, kerana sebahagian besar bahan dalam apl seperti ini hanya kelihatan apabila ia dilakukan dalam penyemak imbas, perangkak web mengalami kesukaran untuk memahami kandungan teks apl sedemikian.
Akibatnya, walaupun popularitinya, banyak SPA kekal tanpa nama kepada enjin carian besar seperti Google. Next.js kini termasuk mekanisme terbina dalam yang lebih mantap untuk pemaparan sisi pelayan (SSR) komponen React.
Next.js membenarkan pembangun membina kod JavaScript pada pelayan semasa proses binaan dan menyediakan HTML asas yang boleh diindeks kepada pengguna.
Kelebihan
- Hebat untuk pengalaman pengguna
- Hebat untuk SEO
- Bina tapak web statik yang sangat pantas yang berkelakuan seperti dinamik
- Fleksibiliti dalam membina UI & UX.
- Banyak kelebihan pembangunan
- Sokongan masyarakat yang hebat
Kekurangan
- Laman web atau aplikasi mempunyai jumlah masa tertentu untuk membina atau membangun.
- Untuk tugasan tertentu, Next.js tidak mencukupi. Pembangun harus dapat membina laluan dinamik menggunakan alat Node.js.
Kesimpulan
Seperti yang anda lihat, Next.js memudahkan pembangunan apl React dan membolehkan anda memfokus pada perkara yang paling penting – logik apl dan UI anda. Ia termasuk semua yang diperlukan untuk mencipta apl kontemporari, kaya hadapan dan berkuasa API.
Ia juga sesuai untuk projek kandungan sahaja, seperti blog dan tapak web perniagaan, kerana keupayaannya untuk membina halaman HTML statik.
Dengan edisi semasa, Next.js bukan sahaja mengekalkan tahap pengalaman pembangun yang tinggi tetapi juga memberikan alatan untuk meningkatkan prestasi visual dan pengalaman pengguna, memastikan masa depan yang cerah untuk rangka kerja ini.
Sila tinggalkan balasan anda