Persyaratan

Sebelum membuat project Next.js, ada beberapa tools yang wajib tersedia di komputer Anda.

Minimal yang dibutuhkan:

• Node.js versi 18 atau lebih baru

• Package manager (npm, yarn, pnpm, atau bun)

• Git (opsional tetapi direkomendasikan)

Untuk memastikan Node.js sudah terinstall, jalankan perintah berikut di terminal:

node -v

Jika berhasil, terminal akan menampilkan versi Node.js yang sedang digunakan.

Contoh output:

v20.11.0

Jika Node.js belum terinstall, Anda bisa mengunduhnya dari website resmi Node.js.

Membuat Project Next.js

Cara paling mudah membuat project Next.js adalah menggunakan create-next-app, sebuah tool resmi dari tim Next.js.

Jalankan perintah berikut di terminal:

npx create-next-app@latest my-next-app

Selama proses instalasi, Anda akan diberikan beberapa pertanyaan konfigurasi.

Contoh konfigurasi yang direkomendasikan untuk project modern:

✔ Would you like to use TypeScript? → Yes
✔ Would you like to use ESLint? → Yes
✔ Would you like to use Tailwind CSS? → Yes
✔ Would you like your code inside a src/ directory? → Yes
✔ Would you like to use App Router? → Yes
✔ Would you like to use Turbopack for dev? → Yes

Penjelasan singkat beberapa opsi tersebut:

TypeScript

Membantu menulis kode yang lebih aman dengan sistem tipe.

ESLint

Digunakan untuk menjaga kualitas kode dan mendeteksi kesalahan lebih awal.

Tailwind CSS

Framework CSS utility-first yang sangat populer untuk styling modern.

App Router

Sistem routing terbaru dari Next.js yang lebih powerful dibandingkan Pages Router.

Setelah instalasi selesai, masuk ke folder project:

cd my-next-app

Struktur Folder Project Next.js

Setelah project dibuat, struktur folder biasanya akan terlihat seperti ini:

my-next-app
├── public
├── src
│   ├── app
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components
│   └── lib
├── package.json
├── next.config.js
└── tsconfig.json

Beberapa folder penting yang perlu dipahami:

app/

Folder utama yang digunakan oleh App Router untuk menentukan halaman dan layout aplikasi.

public/

Digunakan untuk menyimpan file statis seperti gambar, favicon, dan font.

components/

Tempat menyimpan komponen React yang dapat digunakan kembali di berbagai halaman.

lib/

Biasanya digunakan untuk helper functions, konfigurasi API, atau utility.

next.config.js

File konfigurasi utama Next.js.

Memahami struktur folder sejak awal akan mempermudah Anda ketika project mulai berkembang.

Menjalankan Development Server

Setelah project berhasil dibuat, Anda bisa menjalankan development server.

Gunakan perintah berikut:

npm run dev

Jika menggunakan yarn:

yarn dev

Jika menggunakan pnpm:

pnpm dev

Setelah server berjalan, buka browser dan akses:

http://localhost:3000

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

Salah satu keunggulan Next.js adalah Hot Reload, yang memungkinkan perubahan kode langsung terlihat di browser tanpa perlu refresh manual.

Mengedit Halaman Pertama

Halaman utama Next.js biasanya berada di file berikut:

src/app/page.tsx

Contoh isi sederhana halaman tersebut:

export default function Home() {
  return (
    <main>
      <h1>Hello Next.js</h1>
      <p>Welcome to your first Next.js application.</p>
    </main>
  );
}

Setiap kali Anda menyimpan perubahan pada file ini, browser akan otomatis memperbarui halaman.

Setup Environment Variable

Dalam project modern, biasanya kita membutuhkan environment variable untuk menyimpan konfigurasi seperti:

• API URL

• API Key

• Database connection

• Secret token

Next.js menyediakan file khusus bernama:

.env.local

Contoh isi file tersebut:

NEXT_PUBLIC_API_URL=https://api.example.com
APP_NAME=My Next App

Jika variable diawali dengan NEXT_PUBLIC_, maka variable tersebut bisa diakses di sisi client.

Contoh penggunaannya:

process.env.NEXT_PUBLIC_API_URL

Setup Alias Import

Dalam project besar, path import sering menjadi panjang dan sulit dibaca.

Contoh tanpa alias:

import Button from "../../../components/ui/Button"

Next.js memungkinkan kita menggunakan alias import agar lebih rapi.

Contoh:

import Button from "@/components/ui/Button"

Alias ini biasanya sudah dikonfigurasi otomatis di file:

tsconfig.json

Contoh konfigurasi:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Dengan alias ini, struktur import akan jauh lebih bersih dan mudah dipelihara.

Build Project untuk Production

Sebelum deploy aplikasi ke server production, Anda perlu melakukan build.

Gunakan perintah berikut:

npm run build

Setelah build selesai, jalankan server production dengan perintah:

npm run start

Mode production biasanya lebih optimal karena:

• kode sudah diminify

• bundle lebih kecil

• performa lebih cepat

Penutup

Sekarang Anda sudah berhasil membuat dan menjalankan project Next.js dari nol.

Pada tahap ini Anda sudah mempelajari:

• cara membuat project Next.js

• struktur folder dasar

• menjalankan development server

• setup environment variable

• penggunaan alias import

• build project untuk production

Di artikel selanjutnya kita akan membahas Routing di Next.js, salah satu fitur paling penting yang membuat framework ini sangat powerful.

Anda akan belajar bagaimana Next.js membuat sistem routing yang lebih sederhana dibandingkan React Router hanya dengan menggunakan struktur folder.