Belajar Frontend - Framework & Meta-framework (Next.js)

#Pendahuluan

Setelah di episode 8 kalian menguasai React sebagai library, episode ini menaikkan satu tingkat: Next.js, meta-framework paling populer untuk React. React sendiri hanya mengurus UI; di aplikasi produksi kalian butuh routing, SEO, optimasi gambar, data fetching, dan deployment — semuanya disediakan Next.js.

Di 2026, "React developer" dan "Next.js developer" praktis dua sisi mata uang yang sama. Hampir semua lowongan kerja React mencari pengalaman Next.js. Lebih dari itu, Next.js merepresentasikan tren besar yang sudah kita singgung di episode 1: garis frontend-backend makin tipis.

#Framework vs Meta-framework

Library (React) — menyediakan satu kemampuan: membangun UI. Kalian yang merakit sisanya.
Framework (Next.js) — menyediakan pola lengkap: routing, rendering, data, optimasi. Kadang disebut meta-framework karena dibangun di atas React.

Kebutuhan	React saja	Next.js
Routing	Setup library + konfigurasi	Folder-based (App Router)
Rendering	Client-only (CSR)	SSG/SSR/ISR/CSR pilihan
SEO	Sulit (render kosong)	Metadata + server rendering
Gambar	`img` biasa	`<Image>` dengan optimasi otomatis
Data	Kalian yang rakit	Server Components + fetch bawaan
Deployment	Setup server sendiri	Siap Vercel/self-host

#App Router dan File Conventions

App Router (default sejak Next.js 13) memetakan folder menjadi URL:

Struktur folder App Router

app/
├── layout.tsx        # kerangka untuk semua halaman anak
├── page.tsx          # rute "/"
└── products/
    ├── page.tsx      # rute "/products"
    └── [slug]/
        └── page.tsx  # rute "/products/:slug" (dinamis)

app/layout.tsx

import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "TokoKita",
  description: "Toko online sederhana untuk belajar frontend",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id">
      <body>{children}</body>
    </html>
  );
}

#Server Components (RSC)

Konsep paling penting di Next.js modern: komponen dijalankan di server, bukan hanya di browser. Konsekuensinya:

Data diambil langsung dari database/API tanpa round-trip klien.
Bundle JavaScript yang dikirim ke browser lebih kecil.
Kalian bisa membaca kredensial server dengan aman.

Server Component mengambil data

// app/products/page.tsx — berjalan di server secara default
import { db } from "@/lib/db";
 
export default async function ProductsPage() {
  const products = await db.product.findMany();
 
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Semua komponen default-nya Server Component. Tandai "use client" hanya untuk komponen yang butuh interaktivitas browser (state, event, hooks).

Note

Pemikiran kunci RSC: "berapa banyak kode yang harus berjalan di browser?" Jawaban yang jujur biasanya "lebih sedikit dari yang selama ini kita asumsikan". Kebanyakan data fetching dan rendering bisa pindah ke server — lebih cepat dan lebih aman. Episode 20 membahas strategi ini lebih dalam.

#Data Fetching dan Streaming

Next.js menyediakan pola data fetching modern di atas RSC:

Streaming dengan Suspense

import { Suspense } from "react";
import { ProductGrid } from "@/components/ProductGrid";
 
export default function Home() {
  return (
    <main>
      <h1>Katalog TokoKita</h1>
      <Suspense fallback={<p>Memuat produk…</p>}>
        <ProductGrid />
      </Suspense>
    </main>
  );
}

Suspense membuat halaman langsung merespons (render kerangka dulu), sementara data produk mengalir belakangan — ini pola streaming yang menjaga LCP tetap cepat. Episode 12 akan mengukur dampaknya.

#Deployment

Next.js siap deploy di mana pun Node.js berjalan:

Build & jalankan produksi

bun run build
bun run start

Platform paling umum: Vercel (pembuat Next.js, deploy dengan push Git), Netlify, atau self-host di VPS/Docker. Semuanya mendukung output: "standalone" untuk image Docker yang ringkas. Kita bahas deployment di edge lebih lengkap di episode 20.

Tip

Repo ini sendiri memakai Next.js — file next.config.ts dan Dockerfile adalah contoh nyata konfigurasi produksi. Baca untuk melihat bagaimana aplikasi React+Next.js sesungguhnya disusun.

#Praktik: Aplikasi Next.js Penuh

Mini roadmap TokoKita di Next.js:

Setup proyek baru

bunx create-next-app@latest toko-kita --typescript --app --tailwind

Lalu bangun secara bertahap: layout.tsx → page.tsx (katalog) → products/[slug]/page.tsx (detail, dengan generateStaticParams) → komponen klien untuk keranjang.

#Common Pitfalls

Kesalahan	Dampak	Perbaikan
Semua komponen `"use client"`	Bundle membengkak	Default server, client hanya saat perlu
Fetch di client padahal bisa server	Lambat + rawan error	Fetch di Server Component
Mengabaikan metadata	SEO kalah	Isi `metadata` per halaman
Folder struktur asal-asalan	Routing membingungkan	Ikuti file conventions
`Image` tanpa `alt`	A11y + SEO buruk	Tambah `alt` (episode 15)

#Penutup

Inti yang harus dibawa pulang:

Next.js adalah meta-framework React: routing, rendering, data, dan deployment dalam satu pola.
App Router memetakan folder → URL; layout + page adalah unit dasarnya.
Server Components memindahkan rendering & data ke server — bundle lebih kecil, lebih aman.
Suspense memberi streaming; Vercel/self-host memudahkan deployment.

Di episode 10 selanjutnya kita mempercantik TokoKita secara konsisten: styling & utility CSS — Tailwind CSS v4, CSS Modules, dan design tokens, yang menyatukan pendekatan styling modern. Sampai jumpa di episode 10!