Jika kamu baru mulai belajar Next.js, langkah pertama yang perlu dilakukan adalah membuat project baru. Kalau kamu belum mengenal framework ini, kamu bisa membaca artikel Apa Itu Next.js? terlebih dahulu untuk memahami konsep dasar dan alasan mengapa framework ini banyak digunakan dalam pengembangan aplikasi React.

Melalui create-next-app, kamu sudah bisa mendapatkan project yang lengkap dengan TypeScript, App Router, Tailwind CSS, hingga ESLint hanya dalam beberapa menit.

Pada tutorial ini, kita akan membuat project dari nol menggunakan konfigurasi yang direkomendasikan oleh tim Next.js.

Prasyarat

• Node.js sudah terinstall
• npm sudah tersedia (otomatis ikut saat menginstall Node.js)
• Visual Studio Code (opsional tetapi direkomendasikan)

---

Cek Versi Node.js

Sebelum membuat project, pastikan Node.js sudah terinstall.

Jalankan perintah berikut di Terminal atau Command Prompt.

node -v

Kemudian cek versi npm.

npm -v

Jika kedua perintah di atas berhasil menampilkan nomor versi, berarti kamu sudah siap membuat project Next.js.

---

Membuat Project Next.js Baru

Jalankan perintah berikut di Terminal.

npx create-next-app@latest

Saat pertama kali dijalankan, npm akan mengunduh package create-next-app versi terbaru.

Need to install the following packages:
create-next-app@16.x.x

Ok to proceed? (y)

Ketik y lalu tekan Enter untuk melanjutkan.

Selanjutnya, create-next-app akan menampilkan beberapa pertanyaan konfigurasi yang bisa kamu sesuaikan dengan kebutuhan project.

---

1. Masukkan Nama Project

Pertama, tentukan nama project yang ingin dibuat.

What is your project named?

Contoh:

my-next-app

Nama ini juga akan menjadi nama folder project yang dibuat.

---

2. Pilih Konfigurasi Default atau Kustom

Selanjutnya akan muncul pertanyaan berikut.

Would you like to use the recommended Next.js defaults?

Pada tutorial ini pilih:

No, customize settings

Dengan memilih opsi ini, kita bisa menentukan sendiri konfigurasi project, seperti penggunaan TypeScript, Tailwind CSS, App Router, hingga React Compiler.

---

3. Gunakan TypeScript

Would you like to use TypeScript?

Pilih:

Yes

TypeScript membantu mendeteksi error lebih awal dan menjadi standar dalam pengembangan aplikasi Next.js modern.

---

4. Pilih Linter

Selanjutnya pilih linter yang ingin digunakan.

Which linter would you like to use?

Pilih:

ESLint

ESLint membantu menjaga kualitas kode dan menemukan potensi kesalahan selama proses development.

---

5. Gunakan React Compiler

Would you like to use React Compiler?

Pada tutorial ini pilih:

No

React Compiler merupakan fitur baru yang bertujuan mengoptimalkan performa aplikasi React secara otomatis. Namun, untuk sebagian besar project, fitur ini belum wajib digunakan.

---

6. Gunakan Tailwind CSS

Would you like to use Tailwind CSS?

Pilih:

Yes

Tailwind CSS adalah framework CSS yang populer dan telah terintegrasi dengan baik pada Next.js.

---

7. Gunakan Folder `src`

Would you like your code inside a `src/` directory?

Pilih:

Yes

Dengan struktur ini, seluruh source code akan ditempatkan di dalam folder src sehingga struktur project menjadi lebih rapi.

---

8. Gunakan App Router

Would you like to use App Router? (recommended)

Pilih:

Yes

App Router merupakan sistem routing terbaru yang direkomendasikan oleh Next.js dan mendukung fitur seperti Server Components, Nested Layout, serta Streaming.

Baca juga: App Router vs Pages Router di Next.js

---

9. Gunakan Import Alias Default

Would you like to customize the import alias (`@/*` by default)?

Pilih:

No

Dengan begitu, project akan tetap menggunakan alias bawaan @/*, sehingga kamu bisa melakukan import file tanpa harus menggunakan path relatif yang panjang.

---

10. Tambahkan File AGENTS.md

Terakhir akan muncul pertanyaan berikut.

Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code?

Pada tutorial ini pilih:

Yes

File AGENTS.md berisi panduan bagi AI coding assistant seperti ChatGPT, GitHub Copilot, Claude Code, atau Cursor agar menghasilkan kode yang mengikuti praktik terbaik dan dokumentasi terbaru Next.js.

Jika kamu belum menggunakan AI untuk membantu proses development, kamu juga bisa memilih No.

---

Setelah semua pertanyaan dijawab, create-next-app akan membuat project baru dan menginstal seluruh dependency yang dibutuhkan secara otomatis.

---

Membuka Project

Masuk ke folder project.

cd my-next-app

Lalu jalankan server development.

npm run dev

Selanjutnya buka browser dan akses alamat berikut.

http://localhost:3000

Jika berhasil, kamu akan melihat halaman default Next.js.

---

Membuka Project di Visual Studio Code

Masuk ke folder project lalu jalankan.

code .

Perintah tersebut akan membuka project langsung di Visual Studio Code.

---

Mengenal Struktur Folder

Berikut beberapa folder penting yang akan sering digunakan.

app/

Berisi seluruh halaman aplikasi jika menggunakan App Router.

public/

Digunakan untuk menyimpan file statis seperti gambar, favicon, maupun icon.

package.json

Berisi daftar dependency serta script yang digunakan project.

tsconfig.json

Konfigurasi TypeScript.

next.config.ts

Konfigurasi Next.js.

---

Mengubah Halaman Pertama

Buka file berikut.

src/app/page.tsx

Ganti isinya menjadi seperti berikut.

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <h1 className="text-4xl font-bold">
        Hello Geido!
      </h1>
    </main>
  );
}

Simpan file tersebut.

Browser akan otomatis melakukan refresh.

---

Mencoba Hot Reload

Salah satu fitur terbaik Next.js adalah Fast Refresh.

Setiap kali kamu menyimpan perubahan, browser akan langsung memperbarui tampilan tanpa perlu menjalankan ulang server.

Sebagai contoh, ubah tulisan:

Hello Geido!

menjadi

Belajar Next.js di Geido 🚀

Simpan file, lalu lihat browser.

---

Menambahkan Gambar

Masukkan file gambar ke folder berikut.

public/

Misalnya:

public/logo.png

Kemudian tampilkan menggunakan komponen next/image.

import Image from "next/image";

<Image
  src="/logo-geido.png"
  alt="Logo"
  width={50}
  height={50}
/>

Komponen Image akan mengoptimalkan ukuran gambar secara otomatis sehingga performa website menjadi lebih baik.

---

Build untuk Production

Setelah selesai mengembangkan aplikasi, jalankan proses build.

npm run build

Perintah ini akan menghasilkan versi production yang sudah dioptimalkan.

---

Menjalankan Hasil Build

Setelah build selesai, jalankan aplikasi production.

npm start

Sekarang aplikasi berjalan menggunakan hasil build production.

---

Script Penting pada package.json

Secara default, Next.js menyediakan beberapa script berikut.

Script	Fungsi
npm run dev	Menjalankan server development
npm run build	Membuat build production
npm start	Menjalankan hasil build
npm run lint	Menjalankan ESLint

---

Troubleshooting

Error: `next is not recognized`

Biasanya terjadi karena proses instalasi belum selesai atau dependency belum terinstall dengan benar.

Coba jalankan kembali.

npm install

Kemudian jalankan lagi.

npm run dev

---

Error: Port 3000 is already in use

Jika port 3000 sedang digunakan aplikasi lain, Next.js biasanya akan menawarkan port berikutnya secara otomatis.

Atau kamu bisa menjalankan:

npm run dev -- --port 3001

---

Error: Node.js Version Too Old

Pastikan menggunakan versi Node.js yang didukung oleh Next.js terbaru.

Cek versinya.

node -v

Jika masih terlalu lama, lakukan update Node.js terlebih dahulu.

---

Kesimpulan

Sekarang kamu sudah berhasil membuat project Next.js baru menggunakan konfigurasi modern seperti TypeScript, App Router, Tailwind CSS, dan Turbopack.

Membuat project hanyalah langkah awal. Agar lebih memahami cara kerja Next.js, kamu bisa mempelajari beberapa materi berikut secara berurutan:

• Jika ingin memahami konsep dasarnya, baca Apa Itu Next.js?
• Setelah itu, pelajari App Router vs Pages Router untuk mengetahui perbedaan dua sistem routing yang tersedia di Next.js.
• Lanjutkan dengan Server Components vs Client Components agar memahami cara Next.js merender komponen.
• Terakhir, pelajari Data Fetching di Next.js (SSR, SSG, ISR, dan RSC) untuk memahami berbagai strategi pengambilan data.

Dengan mengikuti urutan tersebut, kamu akan memiliki pemahaman yang lebih menyeluruh sebelum mulai membangun aplikasi Next.js yang lebih kompleks.