Instalasi Next.js

Sebelum kita mulai membuat aplikasi menggunakan Next.js, ada beberapa hal penting yang perlu diperhatikan supaya proses instalasi berjalan lancar dan tanpa hambatan.

Persyaratan Sistem

Pastikan perangkat teman-teman sudah memenuhi minimum requirement berikut:

• Node.js versi 18.18 atau yang lebih baru.
• Sistem operasi yang didukung: macOS, Windows (termasuk WSL), atau Linux.

Instalasi Otomatis

Cara paling cepat dan praktis untuk membuat project baru Next.js adalah dengan menggunakan create-next-app. Alat ini akan menyiapkan struktur proyek beserta konfigurasi dasarnya secara otomatis.

Buka terminal, lalu jalankan:

npx create-next-app@latest

Setelah itu, teman-teman akan melihat beberapa pertanyaan seperti berikut:

What is your project named? laravel-next
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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

Mari kita bahas satu per satu opsinya:

1. Nama Proyek – Tentukan nama folder project. Misalnya: laravel-next.
2. TypeScript – Pilih Yes jika ingin menggunakan TypeScript, atau No jika ingin tetap dengan JavaScript.
3. ESLint – Pilih Yes untuk mengaktifkan linting (pemeriksaan kualitas kode).
4. Tailwind CSS – Pilih Yes jika ingin menggunakan Tailwind CSS sebagai framework styling.
5. Direktori src/ – Pilih Yes jika ingin menempatkan seluruh kode di folder src/.
6. App Router – Direkomendasikan memilih Yes untuk menggunakan router terbaru di Next.js.
7. Turbopack – Pilih Yes jika ingin mempercepat proses next dev (opsional).
8. Import Alias – Default-nya @/*, tetapi bisa diubah sesuai kebutuhan.

Untuk mengikuti tutorial ini, teman-teman bisa mengatur pilihan seperti contoh berikut:

Masuk ke Direktori Project

Setelah instalasi selesai, masuklah ke folder project yang baru dibuat. Misalnya, jika nama project adalah laravel-next:

Menjalankan Project

Sekarang mari kita coba jalankan project dengan perintah:

npm run dev

Jika port 3000 masih kosong, Next.js akan menampilkan URL berikut di terminal:

http://localhost:3000/

Buka URL tersebut di browser, dan jika tampil seperti ini, berarti instalasi berhasil:

Kesimpulan

Setelah semua pertanyaan dijawab, create-next-app akan membuat struktur folder sesuai nama project dan menginstal semua dependensi yang diperlukan. Sampai tahap ini, aplikasi Next.js kita sudah siap untuk mulai dikembangkan.