Workshop · Hands-on

Next.js
dari Nol sampai Vercel

Bangun aplikasi web modern dengan React, lalu online-kan dalam hitungan menit.

Tekan → / spasi untuk lanjut · M untuk daftar slide · F untuk fullscreen

Hari ini

Agenda Workshop

01

Pengenalan

Apa itu Next.js, kenapa dipakai, cara kerja rendering.

02

Setup Project

create-next-app, struktur folder, menjalankan dev server.

03

Routing

App Router, layout, dynamic route, navigasi.

04

Server & Client

Server Components, Client Components, data fetching.

05

Full-stack

Route Handlers, Server Actions, env, proxy.

06

Deploy

GitHub → Vercel, domain, preview deployment.

Format: setiap materi langsung dipraktikkan. Di akhir kita punya mini blog yang online di Vercel.

Sebelum mulai

Yang Perlu Disiapkan

Node.js 20.9+ (disarankan LTS terbaru)
Git terpasang & sudah dikonfigurasi
Akun GitHub
Akun Vercel (login pakai GitHub)
Code editor — VS Code direkomendasikan
Dasar HTML, CSS, JavaScript & React

Terminal — cek instalasi

node -v    # v20.9.0 atau lebih baru
npm -v
git --version
git config --global user.name "Nama Kamu"
git config --global user.email "[email protected]"

01

Pengenalan Next.js

Framework React untuk production.

Konsep

Apa itu Next.js?

React adalah library untuk membangun UI. Next.js adalah framework di atas React yang menyediakan semua yang dibutuhkan untuk aplikasi siap produksi.

Routing berbasis file/folder
Rendering di server (SSR / SSG / streaming)
Backend dalam satu project (API & Server Actions)
Optimasi gambar, font, dan bundle otomatis

Dibuat oleh

Vercel

Open source, dipakai oleh Netflix, TikTok, Notion, Nike, dan banyak lagi.

Versi saat ini

Next.js 16

App Router, React 19, Turbopack sebagai bundler default.

Perbandingan

React Saja vs Next.js

Kebutuhan	React (Vite)	Next.js
Routing	Pasang library (React Router)	Bawaan — folder = URL
Rendering	Di browser (CSR)	Server, statis, atau browser — pilih per halaman
SEO	HTML awal kosong	HTML sudah berisi konten
Backend / API	Project terpisah	Route Handlers & Server Actions
Optimasi	Manual	`next/image`, `next/font`, code splitting
Deploy	Static hosting	Vercel (zero-config), Node server, Docker, static export

Konsep

Cara Halaman Dirender

CSR · Client-Side

Dirender di browser

Server kirim HTML kosong + JS. Cocok untuk dashboard interaktif di balik login.

SSR · Server-Side

Dirender tiap request

HTML dibuat di server saat diminta. Data selalu terbaru, bagus untuk SEO.

SSG · Static

Dirender saat build

HTML dibuat sekali saat next build. Paling cepat, bisa di-cache CDN.

ISR · Revalidate

Statis + diperbarui berkala

Halaman statis yang dibangun ulang otomatis setiap N detik atau saat dipicu.

Di Next.js kamu tidak perlu memilih satu — tiap halaman/komponen bisa pakai strategi berbeda.

02

Setup Project

Dari terminal kosong ke halaman pertama.

Praktik

Membuat Project Baru

Terminal

npx create-next-app@latest mini-blog

# Pilih "Yes, use recommended defaults"
#  ✔ TypeScript
#  ✔ ESLint
#  ✔ Tailwind CSS
#  ✔ App Router
#  ✔ Turbopack

cd mini-blog
npm run dev

Buka http://localhost:3000 🎉

npm run dev — dev server + hot reload
npm run build — build produksi
npm start — jalankan hasil build

Edit app/page.tsx, simpan, dan lihat browser langsung berubah.

Anatomi

Struktur Folder

mini-blog/
├── app/              # routing ada di sini
│   ├── layout.tsx    # layout root
│   ├── page.tsx      # halaman "/"
│   ├── globals.css
│   └── favicon.ico
├── public/           # file statis
├── next.config.ts
├── package.json
├── tsconfig.json
└── .gitignore

app/ — setiap folder adalah segmen URL
page.tsx — membuat route bisa diakses
layout.tsx — UI pembungkus (header, footer)
public/ — gambar & aset, diakses dari /nama-file
next.config.ts — konfigurasi Next.js

03

App Router

Folder = URL. File = UI.

Routing

Folder Menjadi URL

app/
├── page.tsx              → /
├── about/
│   └── page.tsx          → /about
└── blog/
    ├── page.tsx          → /blog
    └── [slug]/
        └── page.tsx      → /blog/apa-saja

app/about/page.tsx

export default function AboutPage() {
  return (
    <main>
      <h1>Tentang Kami</h1>
      <p>Belajar Next.js bareng!</p>
    </main>
  );
}

Komponen di page.tsx wajib di-export default.

Routing

File Khusus di App Router

File	Fungsi
page.tsx	UI unik untuk route; membuat route bisa diakses publik
layout.tsx	UI pembungkus yang dipakai bersama, tetap ada saat pindah halaman
loading.tsx	Tampilan loading otomatis (React Suspense)
error.tsx	Menangkap error di segmen tersebut
not-found.tsx	Halaman 404
route.ts	Endpoint API (Route Handler)

Plus konvensi folder: [slug] dinamis · (group) grup tanpa URL · _private tidak jadi route.

Routing

Layout

app/layout.tsx

import Link from "next/link";
import "./globals.css";

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="id">
      <body>
        <nav>
          <Link href="/">Home</Link>
          <Link href="/blog">Blog</Link>
          <Link href="/about">About</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

Root layout wajib dan harus berisi <html> & <body>
children = halaman yang sedang aktif
Layout bisa bersarang: app/blog/layout.tsx hanya membungkus halaman blog
State layout tidak hilang saat navigasi

Routing

Navigasi Antar Halaman

Komponen <Link>

import Link from "next/link";

<Link href="/blog">Lihat Blog</Link>
<Link href={"/blog/" + post.slug}>
  {post.title}
</Link>

Navigasi lewat kode (Client Component)

"use client";
import { useRouter } from "next/navigation";

const router = useRouter();
router.push("/dashboard");

Pakai <Link>, bukan <a>, untuk link internal
Navigasi tanpa reload halaman penuh
Halaman tujuan di-prefetch otomatis saat link terlihat
useRouter, usePathname, useSearchParams dari next/navigation
Redirect di server: redirect("/login")

Routing

Dynamic Route

app/blog/[slug]/page.tsx

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

  return <h1>Artikel: {slug}</h1>;
}

Folder [slug] menangkap segmen URL apa pun
/blog/halo-dunia → slug = "halo-dunia"
[...slug] menangkap banyak segmen

Sejak Next.js 15, params & searchParams adalah Promise — wajib di-await.

🛠 Praktik

Buat Kerangka Mini Blog

Ganti isi app/page.tsx dengan sambutan sederhana
Buat app/about/page.tsx
Buat app/blog/page.tsx (daftar artikel — sementara teks dulu)
Buat app/blog/[slug]/page.tsx yang menampilkan slug
Tambahkan navbar dengan <Link> di app/layout.tsx

Cek: buka /, /about, /blog, dan /blog/coba-123.

04

Server & Client Components

Konsep paling penting di Next.js modern.

Konsep

Server vs Client Components

Default

Server Component

Dirender di server, JS-nya tidak dikirim ke browser
Bisa async & akses database / API rahasia langsung
Tidak bisa pakai useState, onClick, dsb.

"use client"

Client Component

Interaktif: state, event, effect
Bisa akses API browser (window, localStorage)
Tetap di-pre-render di server, lalu "dihidupkan" di browser

Aturan praktis: default Server. Tambah "use client" hanya di komponen kecil yang butuh interaksi.

Konsep

Menggabungkan Keduanya

app/components/LikeButton.tsx

"use client";
import { useState } from "react";

export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes}
    </button>
  );
}

app/blog/[slug]/page.tsx (Server)

import LikeButton from "@/app/components/LikeButton";

export default async function Page({ params }) {
  const { slug } = await params;
  const post = await getPost(slug); // di server

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <LikeButton />  {/* pulau interaktif */}
    </article>
  );
}

Data

Mengambil Data di Server

app/blog/page.tsx

import Link from "next/link";

type Post = { id: number; title: string };
const API = "https://jsonplaceholder.typicode.com";

export default async function BlogPage() {
  const res = await fetch(API + "/posts");
  const posts: Post[] = await res.json();

  return (
    <ul>
      {posts.slice(0, 10).map((p) => (
        <li key={p.id}>
          <Link href={"/blog/" + p.id}>{p.title}</Link>
        </li>
      ))}
    </ul>
  );
}

Cukup jadikan komponen async lalu await
Tidak perlu useEffect + loading state manual
Bisa langsung query database (Prisma, Drizzle, dll.)
API key aman — kode tidak pernah sampai ke browser

Data

Caching & Revalidasi

Revalidasi berkala (ISR)

// cache hasil fetch, perbarui tiap 60 detik
const res = await fetch(url, {
  next: { revalidate: 60 },
});

Revalidasi setelah data berubah

import { revalidatePath } from "next/cache";

revalidatePath("/blog");

Secara default data diambil setiap request (dinamis)
Gunakan revalidate agar hasilnya di-cache & diperbarui berkala
revalidatePath / revalidateTag untuk memperbarui cache sesuai kebutuhan

Lanjutan: Next.js 16 punya direktif "use cache" (aktifkan cacheComponents di config) untuk caching per komponen/fungsi.

UX

Loading, Error & Not Found

app/blog/loading.tsx

export default function Loading() {
  return <p>Memuat artikel...</p>;
}

app/blog/[slug]/page.tsx

import { notFound } from "next/navigation";

const res = await fetch(url);
if (!res.ok) notFound(); // → not-found.tsx

app/blog/error.tsx

"use client";

export default function Error({
  error, reset,
}: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Ups: {error.message}</p>
      <button onClick={reset}>Coba lagi</button>
    </div>
  );
}

error.tsx wajib Client Component. loading.tsx otomatis membungkus halaman dengan <Suspense>.

🛠 Praktik

Isi Blog dengan Data Asli

Di app/blog/page.tsx, ambil daftar post dari jsonplaceholder.typicode.com/posts
Di app/blog/[slug]/page.tsx, ambil /posts/{slug} dan tampilkan judul + isi
Panggil notFound() jika post tidak ada (coba /blog/9999)
Tambahkan loading.tsx dan error.tsx di folder blog
Buat LikeButton sebagai Client Component dan pasang di halaman detail

05

Fitur Full-stack

Backend tanpa project terpisah.

Backend

Route Handlers (API)

app/api/hello/route.ts

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

export async function POST(request: Request) {
  const body = await request.json();
  return Response.json(
    { diterima: body },
    { status: 201 }
  );
}

File route.ts → endpoint di URL foldernya
Export fungsi sesuai HTTP method: GET, POST, PUT, DELETE…
Pakai Web API standar: Request & Response
Cocok untuk webhook, integrasi pihak ketiga, aplikasi mobile

Coba: http://localhost:3000/api/hello

Backend

Server Actions

app/contact/actions.ts

"use server";

export async function kirimPesan(formData: FormData) {
  const nama = formData.get("nama");
  const pesan = formData.get("pesan");

  // simpan ke database, kirim email, dll.
  console.log({ nama, pesan });
}

app/contact/page.tsx

import { kirimPesan } from "./actions";

export default function ContactPage() {
  return (
    <form action={kirimPesan}>
      <input name="nama" placeholder="Nama" />
      <textarea name="pesan" />
      <button type="submit">Kirim</button>
    </form>
  );
}

Fungsi server dipanggil langsung dari form — tanpa membuat endpoint API & tanpa fetch manual. Tetap jalan meski JavaScript belum termuat.

UI

Styling

Tailwind CSS (bawaan create-next-app)

<h1 className="text-3xl font-bold text-blue-600">
  Mini Blog
</h1>

CSS Modules — Card.module.css

import styles from "./Card.module.css";

<div className={styles.card}>...</div>

Tailwind CSS — utility class, sudah terpasang jika memilih default
CSS Modules — class otomatis unik per komponen
Global CSS — app/globals.css, di-import di root layout
Library UI populer: shadcn/ui, Radix, Mantine

Optimasi

next/image & next/font

Gambar teroptimasi

import Image from "next/image";

<Image
  src="/hero.png"      // dari folder public/
  alt="Hero"
  width={800}
  height={400}
  priority
/>

app/layout.tsx — Font

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

<body className={inter.className}>
  {children}
</body>

Image: resize otomatis, format modern (WebP/AVIF), lazy load, mencegah layout shift
next/font: font di-host sendiri saat build — tanpa request ke Google, tanpa kedip

SEO

Metadata & SEO

Metadata statis

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Mini Blog",
  description: "Belajar Next.js",
};

Metadata dinamis — [slug]/page.tsx

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  return { title: post.title };
}

Juga tersedia file khusus: sitemap.ts, robots.ts, opengraph-image.png, icon.png.

Konfigurasi

Environment Variables

.env.local

# hanya bisa dibaca di server
DATABASE_URL="postgres://..."
API_SECRET="rahasia"

# bisa dibaca di browser juga
NEXT_PUBLIC_SITE_NAME="Mini Blog"

Akses dengan process.env.NAMA_VARIABEL
Tanpa prefix → hanya server (aman untuk rahasia)
Prefix NEXT_PUBLIC_ → ikut ke bundle browser
.env.local sudah ada di .gitignore

Jangan pernah commit secret ke GitHub. Di Vercel, isi lewat Settings → Environment Variables.

Lanjutan

proxy.ts (dulu middleware.ts)

proxy.ts (root project)

import { NextResponse, type NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  const token = request.cookies.get("token");
  if (!token) {
    return NextResponse.redirect(
      new URL("/login", request.url)
    );
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*"],
};

Berjalan sebelum request sampai ke halaman
Untuk redirect, rewrite, cek login sederhana, header
Next.js 16 mengganti nama middleware.ts → proxy.ts
Jaga tetap ringan — logika berat taruh di halaman/API

🛠 Praktik

Tambahkan Fitur Full-stack

Buat app/api/hello/route.ts yang mengembalikan JSON
Buat halaman /contact dengan form + Server Action
Tambahkan metadata di layout & generateMetadata di detail post
Simpan nama situs di .env.local sebagai NEXT_PUBLIC_SITE_NAME dan tampilkan di navbar
Rapikan tampilan dengan Tailwind

Sebelum lanjut deploy, pastikan npm run build berhasil tanpa error.

06

Deploy ke Vercel

Dari localhost ke internet.

Deploy

Cek Build Lokal Dulu

Terminal

npm run build
npm start

Output build menampilkan tiap route dan jenisnya:

○ Static — di-render saat build
ƒ Dynamic — di-render saat request

Jika build gagal di laptop, build di Vercel juga akan gagal. Perbaiki error TypeScript & import dulu.

Deploy · Langkah 1

Push ke GitHub

Terminal

# create-next-app sudah menjalankan git init
git add .
git commit -m "feat: mini blog"

# buat repo kosong di github.com/new,
# salin URL-nya, lalu:
git branch -M main
git remote add origin <URL-REPO-KAMU>
git push -u origin main

Buat repo di github.com/new — jangan centang "Add README"
Repo boleh public atau private
Pastikan .env.local & node_modules tidak ikut ter-push

Deploy · Langkah 2

Import Project di Vercel

Buka vercel.com → Sign Up / Log in with GitHub
Klik Add New… → Project
Pilih repo mini-blog → Import (beri izin akses repo jika diminta)
Framework Preset terdeteksi otomatis: Next.js — build command tidak perlu diubah
Buka Environment Variables, isi variabel dari .env.local
Klik Deploy dan tunggu ± 1 menit 🚀

Hasilnya: URL publik seperti mini-blog-xxxx.vercel.app dengan HTTPS otomatis.

Deploy · Langkah 3

Git Push = Deploy

Edit kode→git push→Vercel build otomatis→Live ✅

Branch main

Production

Setiap push ke main memperbarui situs utama.

Branch lain / Pull Request

Preview Deployment

Tiap branch/PR mendapat URL sendiri untuk dicek sebelum di-merge.

Rollback mudah: di tab Deployments, pilih versi lama → Promote to Production.

Alternatif

Deploy lewat Vercel CLI

Terminal

npm i -g vercel

vercel login
vercel          # deploy preview
vercel --prod   # deploy production

# ambil env dari Vercel ke lokal
vercel env pull .env.local

Cocok jika tidak ingin lewat GitHub
Pertama kali jalan, CLI akan bertanya & menautkan project
vercel env pull menyamakan env lokal dengan Vercel
vercel logs untuk melihat log

Deploy · Opsional

Pasang Domain Sendiri

Project → Settings → Domains
Masukkan domain, mis. blog.domainku.com
Tambahkan record DNS yang ditampilkan Vercel di penyedia domain
Tunggu verifikasi — SSL dibuat otomatis

Jenis	Contoh record
Subdomain	`CNAME` → nilai dari Vercel (mis. cname.vercel-dns.com)
Apex / root	`A` → IP dari Vercel

Deploy

Masalah yang Sering Muncul

Gejala	Solusi
Build gagal di Vercel	Jalankan `npm run build` lokal, baca log di tab Deployments
Module not found	Huruf besar/kecil nama file harus sama persis (Linux case-sensitive)
Env bernilai undefined	Tambahkan di Vercel lalu redeploy; cek prefix `NEXT_PUBLIC_`
Data tidak berubah	Halaman di-render statis — pakai `revalidate` atau `revalidatePath`
Error hydration	Output server & client beda (mis. `Date.now()`, `window` saat render)

Recap

Yang Sudah Kita Pelajari

📁 Routing

Folder = URL, page, layout, [slug]

🖥 Server-first

Server Components, async fetch, "use client" seperlunya

⚡ UX

loading, error, not-found, Image, Font

🔌 Full-stack

Route Handlers & Server Actions

🔐 Konfigurasi

Env variables, metadata, proxy.ts

🚀 Deploy

GitHub → Vercel, preview, domain

Next steps

Belajar Lebih Lanjut

Database: Postgres (Neon / Supabase) + Prisma atau Drizzle
Autentikasi: Auth.js, Clerk, Better Auth
UI: shadcn/ui + Tailwind
Validasi: Zod untuk form & Server Actions
Caching lanjutan: "use cache" & Cache Components

Dokumentasi

nextjs.org/docs

Referensi resmi & tutorial lengkap.

Kursus gratis

nextjs.org/learn

Membangun dashboard full-stack langkah demi langkah.

Selesai 🎉

Terima kasih!

Sekarang aplikasimu sudah online. Bagikan URL Vercel-mu di grup!

Slide: nextjs.dihapra.dev · Sesi tanya jawab

Next.jsdari Nol sampai Vercel

Next.js
dari Nol sampai Vercel