Next.js merupakan framework React yang fleksibel sehingga dapat membantu kita untuk membuat aplikasi website dengan cepat.
React awalnya merupakan teknologi client-side yang berjalan pada web browser digunakan untuk membuat aplikasi satu halaman atau membuat bagian dari halaman web biasa menjadi dinamis. React ini hanya mendukung rendering pada client-side karena React bekerja di browser.
Yang menjadi permasalahan pada React yaitu karena melakukan rendering pada sisi klien sehingga proses renderingnya menjadi lambat dibandingkan dengan HTML yang diproses dan dirender di sisi server. Rendering sisi klien biasanya perlu melakukan perjalanan bolak-balik tambahan ke server, untuk mengambil data.
Dengan Next.js memungkinkan untuk menjalankan bagian React di server. Dengan pembuatan dinamis, rendering terjadi di server tempat menghasilkan HTML, jadi kita tidak perlu melakukannya di klien setiap saat.
Next.js juga dapat melakukan pembuatan statis, bukan pembuatan dinamis. ini melibatkan pembuatan web dimana sekumpulan file disalin ke jaringan pengiriman konten, dan tersedia di seluruh dunia dan dalam proses membuat web menjadi cepat.
Kemudian Inkremental statis berarti kita dapat menghasilkan apa yang diinginkan secara statis (seperti pemanasan cache), tetapi masih memperbarui elemen yang belum kita buat secara statis atau yang telah berubah secara dinamis, sehingga dalam praktiknya berfungsi seperti cache tingkat lanjut.
Cara Install Next.js
Sebelum lanjut ke tutorial cara install Next.js pastikan kalian sudah menginstall node.js dan npm package. jika kalian belum menginstall node.js dan npm package kalian bisa mengikuti tutorial dibawah ini.
Langkah awal dalam menginstall Next.js yaitu silahkan kalian ketik perintah berikut ini di terminal kalian.
npx create-next-app@latest
Kode diatas akan membuat app next.js dengan versi terbaru, pada tutorial ini versi next.js yaitu versi 13.
Setelah kalian ketik perintah diatas maka nanti akan muncul seperti berikut ini.
What is your project named? my-app Would you like to add TypeScript with this project? Y/N Would you like to use ESLint with this project? Y/N Would you like to use Tailwind CSS with this project? Y/N Would you like to use the `src/ directory` with this project? Y/N What import alias would you like configured? `@/*`
Silahkan kalian isi sesuai kebutuhan kalian. maka setelah itu akan otomatis membuat folder dengan nama proyek kalian dan dependensi yang diperlukan.
Menjalankan Server Development
Untuk menjalankan server kalian bisa ketik perintah berikut di terminal
npm run dev
Setelah itu silahkan kunjungi http://localhost:3000 di browser kalian.
Penutup
Pada artikel ini telah membahas mengenai Next.js dan cara menginstallnya. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.