Setup Proyek Next.js | Dasar Next.js untuk Aplikasi Web Modern | Mahir.dev | Mahir.dev Academy

Setup Proyek Next.js | Dasar Next.js untuk Aplikasi Web Modern | Mahir.dev | Mahir.dev Academy

Buka Terminalmu: Buka aplikasi terminal pilihanmu.
Pilih Lokasi Folder Proyek: Pake perintah cd buat navigasi ke direktori tempat kamu mau nyimpen proyek Next.js-mu. Misalnya, di folder ProyekWeb di Desktop-mu.
bash
```
cd ~/Desktop/ProyekWeb # Sesuaikan path-nya
```
Kalau folder ProyekWeb belum ada, bikin dulu pake mkdir ProyekWeb.
Jalankan Perintah create-next-app: Ini dia mantra saktinya! Ketik perintah berikut di terminal:
bash
```
npx create-next-app@latest
```
- npx: Ini alat dari npm buat ngejalanin package Node.js tanpa perlu nginstal package itu secara global dulu. Praktis!
- create-next-app@latest: Ini nyuruh npx buat pake versi paling baru dari create-next-app.
Jawab Pertanyaan dari create-next-app: Setelah kamu jalanin perintah di atas, create-next-app bakal nanya beberapa hal buat ngatur proyekmu. Jawabannya bisa kamu sesuaikan, tapi ini rekomendasi buat panduan kita (terutama untuk studi kasus Toko Kue nanti):
- What is your project named? (Apa nama proyekmu?) Ketik nama proyekmu. Gak boleh ada spasi, biasanya huruf kecil dan pake tanda hubung. Misalnya: toko-kue-nextjs. Tekan Enter.
  bash
```
✔ What is your project named? … toko-kue-nextjs
```
- Would you like to use TypeScript? (Mau pake TypeScript?) Pilih Yes (pake panah atas/bawah, terus Enter). Kita mau belajar Next.js dengan kekuatan tipe!
  bash
```
✔ Would you like to
```
Setelah kamu jawab semua, create-next-app bakal mulai nginstal semua package yang dibutuhin. Proses ini mungkin butuh beberapa menit tergantung koneksi internetmu. Sabar ya!

Kalau berhasil, kamu bakal liat pesan sukses dan instruksi selanjutnya.
Masuk ke Folder Proyek: Setelah instalasi selesai, pindah ke direktori proyek yang baru aja dibikin:
bash
```
cd toko-kue-nextjs # Atau nama proyek yang kamu kasih tadi
```
Jalankan Development Server: Saatnya nyalain "mesin" Next.js-mu!
bash
```
npm run dev
```
(Atau yarn dev kalau kamu lebih suka pake Yarn dan udah ngesetupnya).

Terminalmu bakal nampilin sesuatu kayak gini:
bash
```
✓ Ready in x.x s
cobalah buka url ini:
➜ Local:    http://localhost:3000
```
(Nomor port 3000 itu default Next.js, tapi bisa aja beda kalau port itu udah dipake).
Buka Proyek di Browser: Buka browser web-mu, terus ketik alamat Local URL yang dikasih Next.js (biasanya http://localhost:3000).

Kamu bakal disambut sama halaman selamat datang default dari Next.js! Keren!

Selamat! Kamu udah berhasil bikin dan ngejalanin aplikasi Next.js pertamamu! 🎉 Ini langkah awal yang gede banget.
Menghentikan Development Server: Kalau mau nge-stop servernya, balik lagi ke terminal tempat kamu ngejalanin npm run dev, terus tekan Ctrl + C.

bash

toko-kue-nextjs/
├── node_modules/       # Semua package pihak ketiga
├── public/             # File statis (favicon, gambar) yang diakses langsung dari root URL
│   └── next.svg
│   └── vercel.svg
├── src/                # KODE UTAMA APLIKASIMU ADA DI SINI!
│   ├── app/            # INTI DARI APP ROUTER
│   │   ├── favicon.ico # Favicon khusus app router
│   │   ├── globals.css # Style CSS global
│   │   ├── layout.tsx  # Layout utama (template) buat semua halaman
│   │   └── page.tsx    # Komponen buat halaman utama (rute '/')
│   ├── (folder lain bisa kamu buat di sini, misal components/, lib/, dll.)
├── .eslintrc.json      # Konfigurasi ESLint
├── .gitignore          # File yang diabaikan Git
├── next-env.d.ts       # Definisi tipe Next.js buat TypeScript
├── next.config.mjs     # Konfigurasi Next.js (atau .js)
├── package-lock.json   # Detail versi package yang diinstal
├── package.json        # Info proyek, skrip (dev, build, start), dependensi
├── postcss.config.js   # Konfigurasi PostCSS (dipake Tailwind)
├── tailwind.config.ts  # Konfigurasi Tailwind CSS (atau .js)
└── tsconfig.json       # Konfigurasi TypeScript

Would you like to use Tailwind CSS? (Mau pake Tailwind CSS?) Pilih Yes. Kita bakal banyak pake Tailwind buat styling di studi kasus dan contoh-contoh nanti.

bash

✔ Would you like to use Tailwind CSS? … No / Yes

Would you like to use src/ directory? (Mau pake folder src/?) Pilih Yes. Naruh kode utama (komponen, halaman, dll.) di dalam folder src/ itu praktik yang rapi dan umum.

bash

✔ Would you like to use `src/` directory? … No / Yes

Would you like to use App Router? (recommended) (Mau pake App Router?) PILIH Yes! Ini penting banget. App Router adalah cara routing modern dan direkomendasiin di Next.js 13.4 ke atas (termasuk v15). Panduan kita bakal fokus pake App Router.

bash

✔ Would you like to use App Router? (recommended) … No / Yes

Would you like to customize the default import alias (@/*)? (Mau kustomisasi alias impor @/*?) Buat sekarang, pilih No aja biar simpel. Alias @/* defaultnya udah nunjuk ke folder src/ (kalau kamu milih pake src/). Ini ngebantu bikin path impor lebih pendek.

bash

✔ Would you like to customize the default import alias (@/*)? … No / Yes