Daftar Isi[Bersembunyi][Menunjukkan]
Saat memilih pustaka atau kerangka kerja perangkat lunak, pengalaman pengembang biasanya diperhitungkan.
Ketika saya menyebutkan "pengalaman pengembang," saya mengacu pada bagaimana pengembang benar-benar melakukan pekerjaan. Pengembang memilih perpustakaan atau kerangka kerja yang menyenangkan untuk digunakan.
Ini adalah salah satu alasan utama mengapa kami sekarang memiliki perpustakaan dan kerangka kerja paling populer. Sebagai pengembang, kita tidak harus memulai dari awal ketika sudah ada alat yang dibuat untuk membantu tugas kita.
Kerangka kerja adalah bagian dari perangkat lunak yang dibuat dan digunakan oleh pengembang untuk membangun aplikasi, dan NextJS adalah salah satunya.
Dalam posting ini, kita akan membahas Nextjs, fitur utamanya, dan bagaimana kita dapat menggunakannya untuk membangun aplikasi. Mari kita langsung masuk.
Apa itu Next.js?
Next.js adalah kerangka kerja JavaScript untuk membangun halaman web statis dan aplikasi online berbasis React dengan cepat dan mudah. Ini memungkinkan Anda untuk merancang aplikasi Web yang hebat untuk berbagai platform, termasuk Windows, Linux, dan Mac.
Anda harus terbiasa dengan kerangka kerja Next.js jika Anda memiliki sedikit keakraban dengan reaksi dan ingin mempelajari lebih lanjut tentang ekosistem reaksi.
Meskipun Next.js hadir dengan semua yang Anda butuhkan untuk memulai, Anda dapat memilih antara NPM dan Yarn, JavaScript dan TypeScript, CSS dan SCSS, ekspor statis, dan penerapan tanpa server.
Fitur
- Perutean dilakukan secara otomatis – Anda tidak perlu mengonfigurasi apa pun karena URL apa pun dipetakan ke sistem file, ke file di folder halaman (tentu saja Anda memiliki opsi penyesuaian).
- Komponen dari Satu File – Sangat mudah untuk menambahkan gaya yang dicakup ke komponen menggunakan styled-jsx, yang sepenuhnya terintegrasi dan diproduksi oleh tim yang sama.
- Memuat Ulang Kode Panas – Ketika Next.js mendeteksi modifikasi yang disimpan ke disk, itu memuat ulang halaman.
- Komponen Dinamis – Anda dapat memuat modul JavaScript dan Komponen Bereaksi secara dinamis.
- Ekspor statis – Next.js memungkinkan Anda mengekspor situs yang sepenuhnya statis dari aplikasi Anda dengan perintah ekspor berikutnya.
- Kompatibilitas dengan Lingkungan – Next.js terintegrasi secara mulus dengan ekosistem JavaScript, Node, dan React.
- Memisahkan Kode Secara Otomatis – Hanya library dan JavaScript yang diperlukan yang digunakan untuk merender halaman. Alih-alih membuat satu file JavaScript yang berisi semua kode aplikasi, Next.js dengan cerdas membagi aplikasi menjadi banyak sumber daya.
Bagaimana cara membuat aplikasi next.js?
Instalasi
Anda dapat menggunakan perintah node npx untuk menginstal dan membangun proyek Next.js.
Ini akan menghasilkan folder dan semua file, konfigurasi, dan item lain yang diperlukan untuk menjalankan proyek Next.js.
Anda dapat meluncurkan aplikasi setelah dibuat.
Halaman & Perutean
Untuk menangani rute dengan Next.js, kita tidak perlu menggunakan kerangka kerja perutean. Perutean dengan Next.js sangat mudah diatur. Saat Anda menggunakan perintah create-next-app untuk membangun aplikasi Next.js baru, aplikasi akan membuat folder bernama 'pages' secara default.
Folder 'halaman' ini adalah tempat Anda menyimpan rute. Akibatnya, setiap file komponen reaksi di subdirektori akan ditangani sebagai rute terpisah.
Misalnya, jika folder tersebut berisi file-file tersebut:
- index.js
- tentang.js
- aricles.js
File ini akan diubah secara otomatis dalam tiga cara:
- Halaman indeks localhost/indeks
- Halaman tentang localhost/tentang
- Halaman blog localhost/artikel
Contoh halaman about.js ditunjukkan di bawah ini. Tidak ada yang disediakan tentang halaman, seperti yang Anda lihat. Ini hanyalah komponen fungsional React standar.
rute
Untuk membuat rute bersarang, Anda harus membuat subfolder terlebih dahulu. Misalnya: halaman/artikel. Buat komponen reaksi 'contact.js' Anda di dalam folder itu, dan itu akan menghasilkan halaman localhost/articles/contact.
Jika Anda meletakkan satu file di pages/articles.js dan satu lagi di pages/articles/index.js. Keduanya mencerminkan jalur yang sama localhost/blog. Dalam situasi ini, Next.js hanya akan merender file article.js. Bagaimana dengan rute dinamis, di mana setiap posting blog memiliki jalurnya sendiri:
- localhost/blog/artikel pertama
- localhost/blog/-artikel kedua
Menggunakan notasi kurung, Anda dapat menentukan rute dinamis di Next.js. Misalnya: halaman/artikel/[siput].js
Rute Tautan
Anda sekarang telah menyelesaikan rute pertama Anda. Saya kira Anda bertanya bagaimana menghubungkan halaman ke rute tersebut. Anda memerlukan 'berikutnya/tautan' untuk melakukannya.
Berikut adalah contoh halaman beranda yang menyertakan tautan ke halaman Tentang:
Jika Anda ingin menata tautan, gunakan sintaks berikut:
Rute Pengalihan
Bagaimana jika Anda perlu memaksa pengalihan ke halaman tertentu? Misalnya, ketika tombol ditekan? Anda dapat melakukannya dengan menggunakan 'router.push':
SEO
Halaman dalam aplikasi web memerlukan elemen meta (kepala) selain data di dalam badan HTML. Ini akan memerlukan instalasi persyaratan tambahan bernama React Helmet dalam Aplikasi React.
Kita dapat menggunakan komponen Head dari next/head di Next untuk dengan mudah menambahkan metadata ke halaman web kita yang akan ditampilkan di hasil pencarian dan penyematan:
Komponen
Anda akan sering perlu mengembangkan komponen atau file tata letak. Misalnya, komponen yang membuat navbar. Kami baru saja menggunakan folder halaman sejauh ini. Bagaimana jika komponen Anda tidak dimaksudkan sebagai halaman rute?
Anda tidak ingin pengguna menavigasi ke halaman seperti localhost/navbar. Jika Anda menempatkan komponen Navbar.js di folder halaman, itulah yang akan terjadi. Apa yang harus Anda lakukan dalam situasi tersebut?
Cukup simpan semua komponen 'bukan halaman' Anda di folder terpisah. Sebagian besar proyek Next.js menggunakan 'komponen' moniker, dan folder ini dibuat di folder root proyek Anda.
Komponen kepala
Pemuatan halaman awal dirender oleh Next.js di sisi server. Ini dilakukan dengan memodifikasi HTML halaman Anda. Bagian header disertakan.
Komponen Next.js Head digunakan untuk memberikan tag bagian header seperti judul dan meta. Komponen Head digunakan dalam contoh komponen Layout ini.
Buat halaman 404 tidak ditemukan
Ini layak untuk membuat halaman kesalahan 404 Anda sendiri. Anda mungkin ingin menyesuaikan pesan atau menambahkan desain halaman Anda sendiri. Di folder halaman, buat file 404.js.
Ketika kesalahan 404 terjadi, Next.js akan secara otomatis mengarahkan ulang ke halaman ini. Berikut ini contoh halaman 404 yang dipersonalisasi:
Pengambilan Data dari sisi server
Alih-alih mengunduh data di sisi klien, Next.js memungkinkan Anda untuk melakukan populasi data awal, yang menyiratkan pengiriman halaman dengan data yang sudah diisi dari server.
Anda memiliki dua pilihan untuk menerapkan pengambilan data sisi server:
- Data harus diambil pada setiap permintaan.
- Hanya dapatkan data satu kali selama proses konstruksi (situs statis)
Ambil data pada setiap permintaan
Metode getServerSideProps digunakan untuk membuat sisi server setiap permintaan. Fungsi ini dapat disertakan di akhir file komponen Anda. Next.js akan secara otomatis mengisi props komponen Anda dengan objek getServerSideProps jika fungsi itu ada di file komponen Anda.
Ambil data pada waktu pembuatan
Metode getStaticProps digunakan untuk merender sisi server pada waktu pembuatan. Fungsi ini dapat disertakan di akhir file komponen Anda. Metode ini menjalankan kode server dan mengirimkan permintaan GET ke server, tetapi hanya sekali ketika proyek kita selesai.
Mengapa Anda harus belajar Next.js?
Salah satu alasannya adalah karena Next.js dibangun di atas React, toolkit pengembangan front-end untuk membuat antarmuka pengguna itu adalah pilihan favorit saya untuk mendesain aplikasi web.
Tapi itu tidak akan cukup jika Next.js tidak bagus dalam apa yang dilakukannya… kan?
Jadi, apa sebenarnya fungsinya?
Pertama-tama kita harus mendefinisikan beberapa konsep untuk memahaminya. Next.js mendapatkan popularitas karena memecahkan masalah yang dihadapi banyak pengembang web dengan aplikasi web sisi klien (di browser). Aplikasi Satu Halaman (SPA) ini memiliki pengalaman yang lebih baik karena mereka tidak memerlukan pengguna untuk memuat ulang halaman dan memungkinkan lebih banyak interaktivitas.
Namun, karena sebagian besar materi dalam aplikasi seperti ini hanya terlihat saat dijalankan di browser, perayap web mengalami kesulitan memahami konten teks aplikasi semacam itu.
Akibatnya, terlepas dari popularitas mereka, banyak SPA sebagian besar tetap anonim untuk mesin pencari besar seperti Google. Next.js sekarang menyertakan mekanisme bawaan yang lebih kuat untuk rendering sisi server (SSR) komponen React.
Next.js memungkinkan pengembang untuk membuat kode JavaScript di server selama proses pembuatan dan menyediakan HTML dasar yang dapat diindeks kepada pengguna.
Pro
- Bagus untuk pengalaman pengguna
- Bagus untuk SEO
- Bangun situs web statis super cepat yang berperilaku seperti dinamis
- Fleksibilitas dalam membangun UI & UX.
- Banyak keuntungan pengembangan
- Dukungan komunitas yang luar biasa
Kekurangan
- Situs web atau aplikasi memiliki waktu tertentu untuk dibangun atau dikembangkan.
- Untuk tugas tertentu, Next.js tidak memadai. Pengembang harus dapat membuat rute dinamis menggunakan alat Node.js.
Kesimpulan
Seperti yang Anda lihat, Next.js menyederhanakan pengembangan aplikasi React dan memungkinkan Anda untuk fokus pada hal yang paling penting – logika aplikasi dan UI Anda. Ini mencakup semua yang diperlukan untuk membuat aplikasi kontemporer, kaya frontend, dan didukung API.
Ini juga sesuai untuk proyek konten saja, seperti blog dan situs web bisnis, karena kemampuannya untuk membangun halaman HTML statis.
Dengan edisi saat ini, Next.js tidak hanya mempertahankan pengalaman pengembang tingkat tinggi tetapi juga memberikan alat untuk meningkatkan kinerja visual dan pengalaman pengguna, memastikan masa depan yang cerah untuk kerangka kerja ini.
Tinggalkan Balasan