Memulai Project Pertama dengan Next.js

Tutorial Next.js #1: Cara Membuat Project Pertama Next.js Menggunakan App Router Setelah memahami apa itu Next.js, langkah selanjutnya yang paling seru adalah langsung praktik membuat project pertama. Dalam tutorial ini, kita bakal bahas dari persiapan awal, instalasi, konfigurasi, sampai menjalankan aplikasi di browser. Persiapan Awal Sebelum memulai, pastikan beberapa tools berikut sudah terpasang di perangkat kamu: 1. Node.js (rekomendasi versi LTS terbaru) 2. Package Manager (npm, pnpm, atau yarn) 3. Code Editor (disarankan VS Code) 4. Terminal (PowerShell, Command Prompt, atau Terminal bawaan OS) 5. Pengetahuan Dasar (HTML, CSS, dan JavaScript/TypeScript) Langkah-Langkah Membuat Project 1. Buka Terminal dan Tentukan Lokasi Folder Buka terminal kamu, lalu arahkan ke direktori tempat kamu ingin menyimpan project. Contoh pada Windows: cd D:\Project\Next 2. Jalankan Perintah Instalasi Setelah berada di direktori yang diinginkan, ketik perintah berikut untuk membuat project baru: npx create-next-app@latest belajar-nextjs 3. Memilih Konfigurasi Project Saat proses pembuatan, kamu akan diminta memilih beberapa konfigurasi. Berikut saran opsi yang bisa kamu pilih: Would you like to use TypeScript? › Yes Would you like to use ESLint? › Yes Would you like to use Tailwind CSS? › Yes Would you like your code inside a `src/` directory? › No Would you like to use App Router? › Yes Would you like to use Turbopack? › Yes Would you like to customize the import alias? › Yes Penjelasan Singkat Opsi Konfigurasi: * TypeScript: Memberikan sistem type-checking pada JavaScript. Sangat direkomendasikan karena sudah menjadi standar dalam project Next.js modern. * ESLint: Alat otomatis untuk mendeteksi potensi kesalahan atau penulisan kode yang kurang rapi. * Tailwind CSS: Framework CSS berbasis utility classes yang memudahkan proses styling tampilan. * src/ directory: Jika memilih No, struktur folder akan lebih ringkas dan langsung sejajar di direktori utama (root). * App Router: Fitur routing modern bawaan Next.js yang menggunakan struktur folder app/. * Turbopack: Bundler generasi baru yang jauh lebih cepat untuk proses pengembangan (development). * Import Alias: Memungkinkan kamu mengimpor component dengan jalur (path) yang ringkas, contohnya: import Button from "@/components/Button"; // Lebih rapi dibanding ../../components/Button 4. Masuk dan Buka Folder Project Setelah proses instalasi selesai, masuk ke folder project yang baru dibuat: cd belajar-nextjs Lalu buka folder tersebut langsung di VS Code dengan perintah: code . (Catatan: Jika perintah code . belum aktif, kamu bisa membukanya secara manual via menu File → Open Folder di VS Code). 5. Mengenal Struktur Folder Ketika project terbuka di VS Code, kamu akan melihat struktur file dan folder seperti ini: belajar-nextjs/ ├── app/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── public/ ├── node_modules/ ├── package.json ├── package-lock.json ├── next.config.ts ├── tsconfig.json └── eslint.config.mjs Tidak perlu menghafal semua file sekaligus! Untuk tahap awal, fokus saja pada tiga area utama: * app/: Tempat kamu menulis logika aplikasi dan membuat halaman web. * public/: Tempat menyimpan file statis seperti gambar, logo, atau font. * package.json: Berisi daftar dependensi/pustaka (library) dan skrip proyek. 6. Memahami Jalur Halaman (app/page.tsx) Di dalam folder app/, file page.tsx berfungsi sebagai halaman utama (Home Page). app/page.tsx ---> Akses ke URL utama ( / ) Secara otomatis, ketika kamu mengakses alamat http://localhost:3000, Next.js akan merender konten dari app/page.tsx. --- 7. Menjalankan Server Lokal (Development) Sekarang saatnya melihat hasil project kamu! Jalankan perintah ini di terminal VS Code: npm run dev Jika berhasil, terminal akan menampilkan output seperti ini: ▲ Next.js 15.x.x - Local: http://localhost:3000 Buka browser kamu (Chrome, Firefox, Edge), lalu ketik alamat http://localhost:3000. Selamat! Jika halaman penyambut (starter page) dari Next.js sudah muncul, artinya project pertama kamu berhasil dibuat dan siap untuk dikembangkan!