Memulai dengan Next.js untuk Pemula

Next.js adalah framework React yang kuat untuk membangun aplikasi web modern. Artikel ini membahas dasar-dasar yang kamu butuhkan untuk mulai berkarya.

Struktur Proyek

App Router menggunakan folder app/ sebagai entry utama. Setiap folder memiliki page.tsx untuk sebuah route.

Berikut struktur folder dasar:

app/
  layout.tsx    // Layout utama
  page.tsx      // Homepage
  about/
    page.tsx    // Route /about
  blog/
    page.tsx    // Route /blog
    [slug]/
      page.tsx  // Dynamic route /blog/[slug]

Dengan struktur ini, kamu bisa membuat routing yang kompleks tanpa konfigurasi tambahan.

Routing

Nested routing dibuat dengan nested folder; dynamic route menggunakan tanda kurung [], misalnya app/blog/[slug]/page.tsx.

Contoh Dynamic Route

// app/blog/[slug]/page.tsx
export default async function BlogPost({ 
  params 
}: { 
  params: Promise<{ slug: string }> 
}) {
  const { slug } = await params;
  
  return <div>Post: {slug}</div>;
}

Generate Static Params

Untuk SSG (Static Site Generation), gunakan generateStaticParams:

export async function generateStaticParams() {
  const posts = await getPosts();
  
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

Komponen Server dan Client

Secara default, komponen di App Router adalah Server Components. Ini memberikan beberapa keuntungan:

Ukuran bundle JavaScript lebih kecil
Akses langsung ke database
Better SEO

Tambahkan "use client" jika butuh interaktif di sisi client:

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Data Fetching

Next.js 15 memperkenalkan async Server Components untuk fetching data:

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  
  return <div>{data.title}</div>;
}

Kesimpulan

Selamat mencoba membangun aplikasi pertamamu dengan Next.js! Framework ini sangat powerful dan terus berkembang.

Tips: Mulai dengan project sederhana, lalu tambahkan fitur secara bertahap. Jangan terburu-buru menggunakan semua fitur sekaligus.