FluentStack

Membuat Next.js Project Lokal

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 10: Next.js App RouterAdvanced55 menitBahasa Indonesia

Membuat Next.js Project Lokal

Membuat Next.js App Router project kecil di perangkat sendiri dengan create-next-app.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan tujuan Local Next.js App milestone
  • Mengecek kesiapan Node.js, npm, dan Git
  • Membuat Next.js project dengan App Router
  • Membuka project sebagai workspace di code editor
Next.jscreate-next-appnpmLocal Workflow

Isi lesson

7 blok
  1. 1.
    Saatnya menjalankan App Router di perangkat kamuBelum selesaiWajib
  2. 2.
    Prasyarat sebelum mulaiBelum selesaiWajib
  3. 3.
    Tool dan dokumentasi setupBelum selesaiOpsional
  4. 4.
    Buat project dengan create-next-appBelum selesaiWajib
  5. 5.
    Checklist local taskBelum selesaiWajib
  6. 6.
    Command gagal sebelum folder project dibuatBelum selesaiOpsional
  7. 7.
    RingkasanBelum selesaiWajib

Saatnya menjalankan App Router di perangkat kamu

Wajib

Lesson dan practice FluentStack sudah membantu kamu membaca App Router, boundary server/client, serta route behavior. Pada Local Next.js App, kamu menggabungkannya dalam project nyata: membuat folder project, menjalankan dev server, mengedit app directory, lalu menyimpan perubahan dengan Git dan GitHub.

Targetnya tetap kecil. Buat dashboard belajar sederhana, mini documentation site, atau product/info site dengan beberapa route. Yang dilatih adalah workflow source code, terminal, browser lokal, file structure, dan commit yang dapat dijelaskan.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Prasyarat sebelum mulai

Pastikan Node.js, npm, dan Git tersedia. Jalankan `node -v`, `npm -v`, dan `git --version`. Dokumentasi Next.js saat ini membutuhkan Node.js minimal versi 20.9. Jika salah satu command tidak dikenali, selesaikan instalasi tool tersebut sebelum membuat project.

Bagian ini memengaruhi progres lesson.

Resource resmi

Opsional

Tool dan dokumentasi setup

Gunakan sumber resmi ini bila tool belum tersedia atau kamu ingin mengecek pilihan create-next-app.

Node.jsWajib

Download Node.js

Install Node.js agar node dan npm tersedia di terminal.

Download Node.js
GitDirekomendasikan

Git Downloads

Install Git bila command git belum tersedia di perangkat kamu.

Download Git

Opsional, tidak menghambat penyelesaian lesson.

Buat project dengan create-next-app

Wajib
bash
npx create-next-app@latest fluent-next-dashboard

Jalankan command ini dari lokasi tempat kamu menyimpan project. Saat prompt muncul, pilih recommended defaults atau pastikan TypeScript, ESLint, dan App Router aktif. create-next-app membuat folder project sekaligus menginstall dependencies awalnya.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di perangkat kamu:

  • Buka terminal pada folder kerja yang mudah ditemukan.
  • Jalankan `node -v`, `npm -v`, dan `git --version`.
  • Jalankan create-next-app dengan nama `fluent-next-dashboard`.
  • Pilih recommended defaults atau aktifkan TypeScript, ESLint, dan App Router.
  • Masuk ke folder project dengan `cd fluent-next-dashboard`.
  • Buka folder tersebut di code editor.
  • Pastikan terdapat `package.json`, `app` atau `src/app`, dan `.gitignore`.

FluentStack tidak dapat memeriksa folder perangkat kamu. Tandai selesai hanya setelah project benar-benar dibuat dan terbuka sebagai workspace.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Command gagal sebelum folder project dibuat

Jika `npx` atau `node` tidak dikenali, jangan mengulang command create-next-app berkali-kali. Cek Node.js dan npm dari terminal baru. Jika koneksi terputus, cek koneksi lalu jalankan ulang dari folder kerja yang sama setelah tooling tersedia. Jangan membuat project di dalam folder FluentStack atau project lain yang sudah ada.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Local Next.js App adalah milestone workflow di perangkat sendiri.
  • create-next-app memberi setup awal dengan tooling dan App Router.
  • Pastikan Node.js, npm, dan Git tersedia sebelum meneruskan setup.
  • Buka folder project sebagai workspace agar terminal dan editor mengarah ke project yang sama.
  • Berikutnya kamu akan menjalankan development server dan membuka app melalui localhost.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Saatnya menjalankan App Router di perangkat kamu.

Memuat progresReview module