Next.js 15 untuk Pemula: Panduan Memulai Web Development Modern

Next.js adalah framework React yang paling populer untuk membangun website modern. Dengan Next.js 15, Anda bisa membuat website statis, dynamic, hingga full-stack application — semuanya dalam satu framework.

Panduan ini dirancang untuk pemula yang sudah paham dasar HTML, CSS, dan sedikit JavaScript.

Mengapa Next.js?

Sebelum belajar Next.js, Anda mungkin bertanya: kenapa tidak React saja?

React adalah library untuk membangun antarmuka pengguna, tapi ia tidak mengatur bagaimana aplikasi distrukturkan, di-routing, atau di-deploy. Next.js mengisi celah itu dengan menyediakan:

• File-based routing — buat file, otomatis jadi halaman
• Server-side rendering — halaman di-render di server untuk performa dan SEO lebih baik
• API routes — buat backend API dalam satu project yang sama
• Optimasi gambar otomatis — komponen <Image> yang cerdas

Instalasi

Pastikan Node.js versi 18 atau lebih baru sudah terinstal di komputer Anda. Kemudian jalankan:

npx create-next-app@latest project-saya
cd project-saya
npm run dev

Buka browser di http://localhost:3000 dan Anda akan melihat halaman default Next.js.

Memahami Struktur App Router

Next.js 15 menggunakan App Router sebagai sistem routing default. Strukturnya berbasis folder di dalam direktori app/.

app/
  page.tsx          → halaman utama (/)
  layout.tsx        → layout yang mengelilingi semua halaman
  about/
    page.tsx        → halaman /about
  blog/
    page.tsx        → halaman /blog
    [slug]/
      page.tsx      → halaman /blog/nama-artikel (dinamis)

Setiap page.tsx adalah sebuah halaman yang bisa diakses melalui URL.

Membuat Halaman Pertama

Edit file app/page.tsx:

export default function Home() {
  return (
    <main>
      <h1>Halo, ini website saya!</h1>
      <p>Dibangun dengan Next.js 15</p>
    </main>
  )
}

Simpan, dan browser akan otomatis me-refresh untuk menampilkan perubahan.

Server Components vs Client Components

Ini adalah konsep paling penting di Next.js App Router.

Server Components (default) dirender di server. Cocok untuk:

• Mengambil data dari database
• Halaman statis yang tidak butuh interaktivitas
• Konten yang perlu terindeks oleh Google

Client Components dirender di browser. Gunakan saat butuh:

• Interaksi pengguna (klik, input, form)
• State (useState, useEffect)
• Browser API (localStorage, geolocation)

Untuk membuat Client Component, tambahkan "use client" di baris pertama file:

"use client"

import { useState } from "react"

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Klik: {count}
    </button>
  )
}

Mengambil Data

Di Server Component, Anda bisa langsung menggunakan async/await:

async function getPosts() {
  const res = await fetch("https://api.example.com/posts")
  return res.json()
}

export default async function BlogPage() {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Tidak perlu useEffect atau loading state — Next.js menangani semuanya di server.

Deploy ke Vercel

Vercel adalah platform hosting yang dibuat oleh tim Next.js. Deploy-nya sangat mudah:

1. Push kode ke GitHub
2. Daftar di vercel.com
3. Import repository GitHub Anda
4. Klik Deploy

Selesai. Website Anda sudah online dengan HTTPS, CDN global, dan deployment otomatis setiap kali Anda push kode baru.

Langkah Selanjutnya

Setelah memahami dasar-dasar ini, langkah selanjutnya yang disarankan:

1. Tailwind CSS — styling utility-first yang sangat populer dengan Next.js
2. Prisma + PostgreSQL — untuk menyimpan data di database
3. NextAuth.js — untuk autentikasi pengguna
4. Vercel Analytics — untuk memantau performa website

Next.js memiliki ekosistem yang sangat kaya. Mulailah dari yang kecil, bangun sesuatu yang nyata, dan pelajari lebih dalam seiring kebutuhan.

Butuh bantuan membangun website dengan Next.js? Hubungi NehanDev — kami siap membantu.