Membuat Proyek & Struktur Folder
Membuat proyek dengan create-next-app dan mengenal folder pentingnya.
Yang dibutuhkan
- Node.js versi LTS (cek dengan
node -v). - VS Code sebagai editor.
Membuat proyek
npx create-next-app@latest toko
cd toko
npm run devSaat ditanya pilihan, tekan Enter saja (pilihan bawaan sudah bagus untuk pemula). Lalu buka http://localhost:3000 di browser.
Folder yang perlu kamu kenal
| Lokasi | Fungsinya |
|---|---|
app/ | Semua halaman situsmu |
app/page.js | Halaman utama (alamat /) |
app/layout.js | Kerangka yang membungkus semua halaman |
public/ | Gambar dan berkas statis |
package.json | Daftar paket dan perintah |
Perintah penting
| Perintah | Kegunaan |
|---|---|
npm run dev | Menjalankan situs untuk belajar (otomatis ter-update saat file disimpan) |
npm run build | Membuat versi final untuk dipublikasikan |
npm start | Menjalankan versi final |
Coba buka app/page.js, ubah tulisannya, simpan, dan lihat browser berubah sendiri.