Langsung ke konten utama

Cara Install Next JS


Apa itu Next.js?

Next.js adalah sebuah React framework yang dibuat untuk mengatasi masalah client-side rendering yang dimiliki React.

Sebuah halaman website yang dibuat menggunakan React ‘terasa ringan’ karena tampilan website sangat interaktif.

Selain itu, saat data berubah, React dengan efisien akan mengupdate bagian dari halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh.

Untuk mendapatkan itu semua, client harus load semua file JavaScript sebelum konten halaman ditampilkan. Jika file JS cukup besar maka waktu yang dibutuhkan untuk load pertama kali juga menjadi lebih lama.

Masalah lain dari client-side rendering adalah SEO, ada kemungkinan web crawler berusaha mengindex halaman yang belum selesai dirender sepenuhnya (karena waktu load yang lama). Dan menganggap web tersebut blank.

Kedua masalah diatas dapat diselesaikan dengan teknik pre-rendering. Yaitu halaman HTML dan file JavaScript di generate sebelum dikirim ke client.

 

Berikut Cara Install NextJS:

1. Tentukan direktori dimana folder proyek aplikasi NextJS akan diletakkan.
2. Jalankan perintah npm init next-app di terminal.
3. Tuliskan nama proyek yang Anda inginkan saat muncul pertanyaan “What is your project
named?”

4. Tunggu beberapa saat hingga proyek selesai diinisialisasi.
5. Pindahkan direktori aktif ke dalam folder proyek.
6. Jalankan perintah npm run dev untuk menguji jalannya aplikasi.
7. Tunggu beberapa saat hingga aplikasi sukses di-compile.


8. Buka web browser di komputer Anda lalu masukkan alamat URL localhost:3000 untuk mengakses halaman aplikasi yang baru Anda buat. Anda akan mendapatkan tampilan default
seperti berikut:

9. Hasil folder dari install nextjs


 

Referensi:

https://medium.com/devsaurus-class/tutorial-next-js-2021-47661386673b 

Komentar

Posting Komentar

Postingan populer dari blog ini

Pembelajaran Dasar React Bagi Pemula

  Apa itu Reactjs? Reactjs adalah sebuah library yang dibuat oleh Facebook untuk membuat UI (user interface) pada Web Mobile juga. Banyak orang menyebutnya sebagai framework , namun secara teknis.. Reactjs bukanlah sebuah framework. Melainkan sebuah library untuk membuat UI.   Oke, mari kita coba membuat aplikasi dengan Reactjs pertama kita buat file html biasa dengan nama hello-world.html , di dalam body kita akan menampilkan teks. <! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < title > Belajar Reactjs </ title > < script src = "https://unpkg.com/react@16/umd/react.production.min.js" >      </ script > < script src = "https://unpkg.com/react-dom@16/umd/react-dom.production      .min.js" ></ script > < script src = "https://unpkg.com/babel-standalone@6.15.0/babel.min.js" >      </ script > </ head > < bod...
Posting Komentar
Baca selengkapnya

Penambahan Function Pop Up Edit Toko di NextJS

      Apa itu Next.js?  Next.js merupakan sebuah React framework yang dibentuk buat mengatasi kasus client-side rendering yang dimiliki React. Sebuah halaman website yang dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat interaktif.  Selain itu, ketika data berubah, React menggunakan efisien akan mengupdate bagian menurut halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh.  Untuk menerima itu seluruh, client wajib load seluruh file JavaScript sebelum konten halaman ditampilkan. apabila file JS relatif akbar maka ketika yang diperlukan buat load pertama kali pula sebagai lebih lama.  Masalah lain menurut client-side rendering merupakan SEO, terdapat kemungkinan web crawler berusaha mengindex halaman yang belum terselesaikan dirender sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi blank.  Kedua kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu ...
Posting Komentar
Baca selengkapnya

Pembuatan halaman Home dengan NextJS

      Apa itu Next.js?  Next.js merupakan sebuah React framework yang dibentuk buat mengatasi kasus client-side rendering yang dimiliki React. Sebuah halaman website yang dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat interaktif.  Selain itu, ketika data berubah, React menggunakan efisien akan mengupdate bagian menurut halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh.  Untuk menerima itu seluruh, client wajib load seluruh file JavaScript sebelum konten halaman ditampilkan. apabila file JS relatif akbar maka ketika yang diperlukan buat load pertama kali pula sebagai lebih lama.  Masalah lain menurut client-side rendering merupakan SEO, terdapat kemungkinan web crawler berusaha mengindex halaman yang belum terselesaikan dirender sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi blank.  Kedua kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu ...
Posting Komentar
Baca selengkapnya