Next.js adalah framework React paling populer untuk membangun website modern. Berbeda dengan React biasa yang hanya menangani antarmuka (UI), Next.js menyediakan semuanya secara lengkap: routing berbasis file, server-side rendering (SSR), static site generation (SSG), hingga API endpoint — semua dalam satu framework. Hasilnya, website yang kamu buat lebih cepat, SEO-friendly, dan mudah di-deploy. Di tutorial ini, kamu akan membangun aplikasi Next.js dari nol, langkah demi langkah, dengan kode yang bisa langsung kamu jalankan.

Apa Itu Next.js dan Kenapa Harus Dipelajari?

Kalau kamu sudah pernah belajar React, kamu pasti tahu bahwa React hanyalah sebuah library untuk membuat komponen antarmuka. React tidak menyediakan routing, struktur data fetching, atau optimasi SEO secara bawaan. Di sinilah Next.js masuk: ia adalah framework yang dibangun di atas React dan menambahkan lapisan-lapisan penting di atasnya. Dengan Next.js, kamu bisa merender halaman di sisi server sehingga kontennya langsung terbaca oleh mesin pencari — sesuatu yang sulit dilakukan dengan React murni (client-side rendering).

Framework ini juga dipakai perusahaan besar seperti TikTok, Netflix, dan Twitch, serta menjadi pilihan utama untuk membangun landing page, e-commerce, dan dashboard. Jadi, menguasai Next.js adalah investasi skill yang sangat berharga untuk kariermu.

Prasyarat: sebelum mulai, pastikan kamu sudah memahami dasar-dasar React (komponen, state, dan props) serta JavaScript modern. Kalau belum, pelajari dulu tutorial React untuk pemula dan panduan async/await di JavaScript. Kamu juga butuh Node.js versi 18.18 ke atas yang terpasang di komputermu.

Membuat Proyek Next.js Baru

Cara termudah memulai adalah dengan perintah create-next-app. Buka terminal lalu jalankan perintah berikut:

bash
npx create-next-app@latest bengkelku

Kamu akan ditanya beberapa pertanyaan konfigurasi. Untuk tutorial ini, jawab seperti berikut (pilih Yes untuk TypeScript, ESLint, Tailwind CSS, dan App Router):

bash
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 to use your `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`? Yes
Would you like to customize the import alias (`@/*` by default)? No

Setelah proses selesai, masuk ke folder proyek dan jalankan server development:

bash
cd bengkelku
npm run dev

Buka http://localhost:3000 di browser. Kamu akan melihat halaman default Next.js. Selamat, proyek pertamamu sudah berjalan! 🎉

Memahami Struktur Folder (App Router)

Next.js versi modern menggunakan App Router yang berpusat pada folder app/. Berikut struktur folder yang paling penting untuk kamu ketahui:

bash
bengkelku/
├── app/
│   ├── layout.tsx      # layout utama (header/footer, metadata)
│   ├── page.tsx        # halaman utama "/"
│   └── globals.css     # styling global (Tailwind)
├── public/             # aset statis (gambar, favicon)
├── package.json
└── next.config.ts

Inti dari App Router sangat sederhana: setiap file page.tsx di dalam folder app/ otomatis menjadi sebuah halaman yang bisa diakses lewat URL tertentu. Tidak perlu mengatur router secara manual seperti di React biasa.

Membuat Halaman dengan File-Based Routing

Mari kita ubah isi halaman utama. Buka file app/page.tsx dan ganti isinya dengan kode berikut:

python
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Halo, Dunia!</h1>
      <p className="mt-4 text-lg text-gray-600">
        Website pertamaku dengan Next.js.
      </p>
    </main>
  );
}

Sekarang coba buat halaman baru. Buat folder app/about/ dan file page.tsx di dalamnya:

python
export default function About() {
  return (
    <main className="p-12">
      <h1 className="text-3xl font-bold">Tentang Kami</h1>
      <p className="mt-4">Halaman ini dibuat dengan file-based routing.</p>
    </main>
  );
}

Tips: aturan routing-nya sangat mudah diingat: folder menentukan segmen URL, dan file page.tsx menentukan isinya. Jadi app/about/page.tsx otomatis bisa diakses di /about.

Mengatur Layout dan Metadata untuk SEO

File app/layout.tsx adalah komponen pembungkus yang dipakai semua halaman. Di sinilah kamu menaruh header, footer, dan metadata global. Ini salah satu kekuatan utama Next.js untuk SEO. Ubah layout.tsx menjadi seperti ini:

python
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Bengkelku — Belajar Next.js",
  description: "Contoh aplikasi Next.js untuk pemula",
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="id">
      <body>{children}</body>
    </html>
  );
}

Dengan metadata ini, judul dan deskripsi halaman otomatis muncul di hasil pencarian Google — tidak perlu library tambahan seperti react-helmet.

Server Component vs Client Component

Salah satu konsep paling penting di Next.js App Router adalah pembagian antara Server Component dan Client Component. Secara default, semua komponen adalah Server Component: dirender di server, sehingga lebih cepat dan aman. Namun, Server Component tidak bisa menggunakan useState, useEffect, atau event handler seperti onClick.

Untuk membuat komponen interaktif, tambahkan direktif "use client" di baris paling atas file. Contoh komponen counter:

python
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-6">
      <p className="text-2xl">Nilai: {count}</p>
      <button
        onClick={() => setCount(count + 1)}
        className="mt-3 rounded bg-blue-600 px-4 py-2 text-white"
      >
        Tambah
      </button>
    </div>
  );
}

Peringatan: direktif "use client" harus berada di baris paling atas file, sebelum import apa pun. Kalau kamu memanggil useState tanpa direktif ini, Next.js akan menampilkan error saat build.

Dynamic Route dan Mengambil Data

Untuk membuat halaman dengan URL dinamis (misalnya halaman artikel per judul), gunakan tanda kurung siku pada nama folder. Contoh: buat file app/posts/[slug]/page.tsx:

python
type Post = {
  slug: string;
  title: string;
  content: string;
};

const posts: Post[] = [
  { slug: "halo-dunia", title: "Halo Dunia", content: "Postingan pertama!" },
  { slug: "belajar-nextjs", title: "Belajar Next.js", content: "App Router itu seru." },
];

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = posts.find((p) => p.slug === slug);

  if (!post) {
    return (
      <main className="p-12">
        <h1>404 — Postingan tidak ditemukan</h1>
      </main>
    );
  }

  return (
    <main className="p-12">
      <h1 className="text-3xl font-bold">{post.title}</h1>
      <p className="mt-4">{post.content}</p>
    </main>
  );
}

Di Next.js 15, params dan searchParams adalah sebuah Promise, jadi kamu harus menunggu dengan await. Kalau kamu masih asing dengan async/await, baca dulu panduan async/await di JavaScript.

Sekarang ambil data dari API sungguhan langsung di Server Component. Buat file app/posts/page.tsx:

python
type Post = {
  id: number;
  title: string;
  body: string;
};

export default async function PostsPage() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
  const posts: Post[] = await res.json();

  return (
    <main className="p-12">
      <h1 className="text-3xl font-bold">Daftar Postingan</h1>
      <ul className="mt-4 space-y-2">
        {posts.map((post) => (
          <li key={post.id} className="rounded border p-3">
            {post.title}
          </li>
        ))}
      </ul>
    </main>
  );
}

Membuat API Route Sendiri

Next.js memungkinkanmu membuat backend API tanpa server terpisah. Cukup buat file route.ts di dalam folder app/. Contoh, buat app/api/hello/route.ts:

python
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Halo dari API Next.js!" });
}

export async function POST(request: Request) {
  const body = await request.json();
  return NextResponse.json({ echo: body, receivedAt: new Date().toISOString() });
}

Sekarang buat komponen client yang memanggil API tersebut untuk membuktikannya bekerja:

python
"use client";

import { useEffect, useState } from "react";

export default function ApiDemo() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("/api/hello")
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  }, []);

  return <p className="p-12 text-xl">Pesan dari API: {message || "Memuat..."}</p>;
}

Tips: API route ini sangat berguna untuk menangani form submission, webhook, atau autentikasi — semuanya tanpa perlu menjalankan server Express terpisah.

Untuk berpindah halaman, Next.js menyediakan komponen Link yang melakukan client-side navigation tanpa reload penuh. Buat komponen navbar sederhana lalu panggil di layout.tsx:

python
import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="flex gap-4 bg-gray-900 p-4 text-white">
      <Link href="/">Beranda</Link>
      <Link href="/about">Tentang</Link>
      <Link href="/posts">Postingan</Link>
    </nav>
  );
}

Styling dengan Tailwind CSS

Sejak awal, proyek ini sudah dilengkapi Tailwind CSS sehingga kamu bisa langsung menulis class utility seperti flex, p-4, atau text-white. Kalau kamu belum familiar, pelajari dulu panduan lengkap Tailwind CSS untuk memahami pendekatan utility-first.

Deploy ke Vercel

Langkah terakhir: membuat websitemu online. Cara paling mudah adalah lewat Vercel (perusahaan pembuat Next.js). Pertama, push kode ke GitHub:

bash
git init
git add .
git commit -m "Aplikasi Next.js pertamaku"
git branch -M main
git remote add origin https://github.com/USERNAME/bengkelku.git
git push -u origin main

Lalu buka vercel.com, login dengan akun GitHub, dan klik Import Project untuk repo bengkelku. Vercel akan otomatis mendeteksi Next.js dan men-deploy-nya dalam hitungan menit. Kamu akan mendapatkan URL publik seperti https://bengkelku.vercel.app.

Kesimpulan

Kamu baru saja membangun aplikasi Next.js lengkap dari nol: membuat proyek, mengatur routing, memanfaatkan Server & Client Component, mengambil data, membuat API route, hingga men-deploy ke Vercel. Ini adalah fondasi yang cukup untuk mulai membangun proyek nyata. Langkah selanjutnya yang bisa kamu eksplorasi adalah autentikasi dengan NextAuth, database dengan Prisma, atau dynamic metadata untuk SEO yang lebih dalam. Selamat berkarya! 🚀

Apakah Next.js gratis untuk dipakai?

Ya. Next.js adalah framework open-source berlisensi MIT, jadi gratis digunakan untuk proyek pribadi maupun komersial. Yang berbayar hanyalah layanan hosting seperti Vercel jika kamu memakai paket berbayarnya (ada free tier yang cukup untuk pemula).

Apa bedanya Next.js dengan React biasa?

React adalah library untuk membangun antarmuka (UI), sedangkan Next.js adalah framework yang dibangun di atas React. Next.js menambahkan routing, server-side rendering, static generation, optimasi gambar, dan API route secara bawaan — hal-hal yang harus kamu rakit sendiri jika memakai React murni.

Apakah saya harus menguasai React dulu sebelum belajar Next.js?

Sangat disarankan. Karena Next.js dibangun di atas React, memahami komponen, props, state, dan hooks akan membuatmu jauh lebih cepat memahami materi di tutorial ini. Kalau belum paham, mulai dari tutorial React untuk pemula terlebih dahulu.