Setup Proyek Next.js
Mulai petualangan Next.js-mu! Panduan langkah demi langkah membuat proyek Next.js baru (versi 15+) menggunakan `create-next-app`, termasuk pilihan TypeScript, Tailwind CSS, dan App Router.
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:
-
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:
bash node -v npm -v
-
Terminal (Command Line): Kamu bakal banyak pake terminal buat ngejalanin perintah-perintah Next.js. (Udah jago kan dari panduan Dasar Command Line kita? 😉)
-
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!
-
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 folderProyekWeb
di Desktop-mu.bash cd ~/Desktop/ProyekWeb # Sesuaikan path-nya
Kalau folder
ProyekWeb
belum ada, bikin dulu pakemkdir 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 nyuruhnpx
buat pake versi paling baru daricreate-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
. TekanEnter
.bash ✔ What is your project named? … toko-kue-nextjs
-
Would you like to use TypeScript?
(Mau pake TypeScript?) PilihYes
(pake panah atas/bawah, terusEnter
). Kita mau belajar Next.js dengan kekuatan tipe!bash ✔ Would you like to use TypeScript? … No / Yes
-
Would you like to use ESLint?
(Mau pake ESLint?) PilihYes
. ESLint ngebantu ngejaga kualitas kodemu.bash ✔ Would you like to use ESLint? … No / Yes
-
Would you like to use Tailwind CSS?
(Mau pake Tailwind CSS?) PilihYes
. 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 foldersrc/
?) PilihYes
. Naruh kode utama (komponen, halaman, dll.) di dalam foldersrc/
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?) PILIHYes
! 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, pilihNo
aja biar simpel. Alias@/*
defaultnya udah nunjuk ke foldersrc/
(kalau kamu milih pakesrc/
). Ini ngebantu bikin path impor lebih pendek.bash ✔ 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.
-
-
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 tekanCtrl + 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?
Kuis Setup Proyek Next.js (Vite/create-next-app)
Pertanyaan 1 dari 5
Perintah apa yang paling umum digunakan untuk membuat proyek Next.js baru dengan versi terbaru, yang akan memandu Anda melalui beberapa pilihan konfigurasi?