Cara menginstall Next.js di Windows 10

Pada artikel ini saya akan menjelaskan cara menginstall Next.js dan sebelum masuk ke intinya saya akan menjelaskan terlebih dahulu apa itu Next.js.

Next.js adalah React versi server atau bisa disebut framework. Next.js juga merupakan salah satu React framework yang cukup populer untuk Server Side Rendering. Dan kelebihan dari Next.js adalah kita tidak perlu pusing lagi memikirkan routing.

Fitur Utama Next.js

Berikut adalah beberapa fitur utama pada Next.js :

1. Hot Code reloading

Next.js secara otomatis akan merefresh halaman ketika adanya perubahan yang disimpan.

2. Automatic routing

Next.js sendiri memiliki halaman direktori yang dimana untuk merouting akan disesuaikan dengan file yang kita simpan di halaman direktori dan kita masih dapat merubah sesuai apa yang kita inginkan.

3. Single file component

Next.js juga memiliki styled-jsx seperti di React. Styled-jsx ini berfungsi untuk membuat style dan styled-jsx di Next.js ini kita dapat lebih mudah untuk membuat style di komponen yang kita buat.

4. Server Rendering

Kita dapat merender (optional) komponen react pada server side rendering sebelum mengembalikan halaman html ke klien yang tentunya ini baik untuk SEO.

5. Automatic Code Splitting

Halaman yang akan di render hanya library yang digunakan pada halaman tersebut, ini berarti library yang tidak digunakan di halaman lain tidak akan dirender, yang tentunya ini membuat lebih ringan dan mempercepat waktu request.

6. Dynamic component

Kita dapat mengimpor modul JavaScript atau komponen React secara dinamis.

7. Static export

Next.js juga memiliki static esxport yang dapat digunakan dengan keyword next export, kita dapat mengexport static site dari app kita, sehingga untuk proses deploynya cukup projectnya di export terus di upload diserver.

Proses Instalasi

1. Install create-next-app

Install create-next-app menggunakan terminal (cmd) dengan mengetikkan perintah berikut :

2. Buat folder Next App

Buat folder Next App menggunakan terminal (cmd) dengan mengetikkan perintah berikut :

3. Menjalankan Next App

Setelah berhasil membuat folder kita akan masuk ke dalam folder yang sudah diinstall tadi, dengan mengetikkan perintah berikut :

4. Menjalankan web

Setelah masuk kedalam directorynya kemudian kita akan menjalankan web dengan mengetikkan perintah berikut :

5. Membuka browser

Setalah menjalankan perintah “npm run dev” maka cara menjalankan webnya adalah dengan memanggil http://localhost:3000 di browser kalian masing masing. Setelah dipanggil maka akan menampilkan tampilan seperti di bawah ini :

Jika sudah berhasil menampilkan output seperti gambar di atas, maka kalian sudah dapat menggunakan Next.js di Windows 10

Sekian untuk artikel saya tentang cara menginstall Next.js di windows 10, semoga bermanfaat. Mohon maaf jika ada salah dalam penulisan atapun materi. Terimakasih…