Halo, pada kesempatan kali ini kita akan belajar membuat project baru di Next.Js dengan Tailwind Css.
Apa itu Next.Js ?
Next Js is an open-source web developement framework built on top og Node.Js enabling React based web applications functionalities such as server-side rendering and generating static websites.
Next Js merupakan framework dari React.js yang bersifat Open Source dan dibangun diatas Node.js. Next.js sangat popular akarna kemudahannyadan mendukung fitur yang sangat bagus seperti SSR, SSG, routing based file, zero config, fast refresh, Typescript, image Optimization, dan masih banyak lagi
Kenapa harus Next.js ?
Yang pertama tentunya karena kemudahannya, kita sudah tidak perlu lagi melakukan banyak konfigurasisecara manual, baik untuk routing maupun konfigurasi lainnya. Selain itu Next.js juga SEO friendly dengan kemudahan dukungan SSR (Server Side Rendering) yang sudah build in didalamnya.
Langkah 1 - Instalasi Node.js
Sebelum kita membuat project baru dengan Next.js, kita perlu melakukan instalasi Node.js terlebih dahulu di dalam komputer. Lakukan Instalasi node js di komputer masing masing melalui link berikut : https:nodejs.org/en/download/. Ikuti langkah instalasinya kemudian setelah selesai bisa kita cek dengan pergi ke CMD/terminal :
node -v
Setelah berhasil menginstal Node.js maka NPM (Node Package Manager) juga otomatis ikut terinstal. kita bisa mengecek dengan mengetik do CMD/Terminal:
npm -v
Langkah 2 - Instalasi Next.js
Buka terminal di root folder tempat kalian ingin menyimpan file project, kemudian ketik command berikut:
npm install next@latest react@latest react-dom@latest
dalam proses instalasi akan muncul prompt seperti dibawah ini. isi dan pilih sesuai dengan yang kalian butuhkan.
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
tunggu hingga proses instalasi selesai.
Langkah 3 - Uji hasil instalasi next js
Setelah proses instalasi selesai buka di terminal kemudian jalankan website di localhost untuk memastikan proses instalasi berhasil dengan mengetik :
npm run developement
Kita lihat pada gambar diatas, setelah kita mengetikan perintah untuk menjelankan website secara lokal terdapat
ready - started server on 0.0.0.0.3000, url: https://localhost:3000
yang berarti website kita berhasil berjalan di PORT 3000. langsung saja kita buk melalui browser dan hasilnya akan seperti ini
Yeayy!!! Selamat, proses instalasi telah selesai. sekarang kalian bisa memulai mengerjakan mahakarya kalian dengan Next JS, framework dari React!