Proyek Next.js Pertamamu: " архитектура " Pake create-next-app!

Udah semangat mau nyobain kehebatan Next.js? Langkah pertama yang paling penting adalah nyiapin "kanvas" atau proyek Next.js baru di komputermu. Untungnya, tim Next.js udah nyediain alat bantu super praktis bernama create-next-app yang bikin proses ini jadi gampang banget!

create-next-app ini bakal ngurusin semua konfigurasi awal yang ribet, jadi kamu bisa langsung fokus ngoding fitur kerenmu. Kita bakal pake versi terbaru yang udah dioptimasi buat Next.js versi 15+ dan App Router.

Prasyarat (Sekadar Mengingatkan)

Sebelum mulai, pastiin dulu beberapa hal ini udah siap di komputermu ya:

1. Node.js: Next.js butuh Node.js buat jalan. Versi yang direkomendasiin untuk Next.js 14+ (dan pastinya 15+) adalah Node.js 18.17 atau yang lebih baru.

   • Kalau belum punya atau versinya masih lama, download dan instal dulu dari nodejs.org (pilih versi LTS).
   • Instalasi Node.js biasanya udah otomatis nginstal npm (Node Package Manager) juga.
   • Cek versimu di terminal:

     node -v
     npm -v

2. Terminal (Command Line): Kamu bakal banyak pake terminal buat ngejalanin perintah-perintah Next.js. (Udah jago kan dari panduan Dasar Command Line kita? 😉)

3. Code Editor: VS Code sangat direkomendasikan karena punya dukungan TypeScript dan ekosistem Next.js yang bagus banget.

Langkah-Langkah Membuat Proyek Next.js Baru

Siapin terminalmu, kita mulai "ngebangun" proyek Next.js pertama kita!

1. Buka Terminalmu: Buka aplikasi terminal pilihanmu.

2. 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.

   cd ~/Desktop/ProyekWeb # Sesuaikan path-nya

   Kalau folder ProyekWeb belum ada, bikin dulu pake mkdir ProyekWeb.

3. Jalankan Perintah create-next-app: Ini dia mantra saktinya! Ketik perintah berikut di terminal:

   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.

4. 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.

     ✔ 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!

     ✔ Would you like to use TypeScript? … No / Yes

   • Would you like to use ESLint? (Mau pake ESLint?) Pilih Yes. ESLint ngebantu ngejaga kualitas kodemu.

     ✔ Would you like to use ESLint? … No / Yes

   • 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.

     ✔ 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.

     ✔ 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.

     ✔ 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.

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

   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.

5. Masuk ke Folder Proyek: Setelah instalasi selesai, pindah ke direktori proyek yang baru aja dibikin:

   cd toko-kue-nextjs # Atau nama proyek yang kamu kasih tadi

6. Jalankan Development Server: Saatnya nyalain "mesin" Next.js-mu!

   npm run dev

   (Atau yarn dev kalau kamu lebih suka pake Yarn dan udah ngesetupnya).

   Terminalmu bakal nampilin sesuatu kayak gini:

   ✓ 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).

7. 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.

8. Menghentikan Development Server: Kalau mau nge-stop servernya, balik lagi ke terminal tempat kamu ngejalanin npm run dev, terus tekan Ctrl + C.

Struktur Folder Proyek Next.js (App Router dengan src/)

Sekarang, buka folder proyekmu (toko-kue-nextjs) pake Code Editor favoritmu (misalnya, VS Code dengan perintah code . di terminal). Kamu bakal liat struktur folder yang kurang lebih kayak gini (fokus ke yang penting buat awal):

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

Fokus Utama Kita Nanti Bakal Ada di Folder src/app/!

• src/app/layout.tsx: Ini kayak "bungkus" utama buat semua halaman di aplikasimu. Tag <html> dan <body> biasanya didefinisiin di sini.
• src/app/page.tsx: Ini adalah komponen React yang bakal dirender buat halaman utama websitemu (URL /).

Jangan pusing dulu liat banyak file dan folder. Kita bakal pelajari satu-satu bagian pentingnya seiring kita ngebangun studi kasus Toko Kue nanti.

Setup proyek Next.js pake create-next-app itu udah ngurusin banyak hal rumit di belakang layar. Kamu jadi bisa langsung fokus buat bikin halaman dan komponen React yang keren.

Di materi berikutnya, kita bakal mulai ngoprek Routing Dasar dengan App Router buat bikin halaman-halaman baru di aplikasi Next.js kita. Siap buat "ngebangun" ruangan-ruangan di "rumah" Next.js-mu?