Next.js untuk Pemula: React Framework Full-Stack

# Buat proyek Next.js baru dengan App Router
npx create-next-app@latest belajar-nextjs

# Pilihan yang disarankan saat setup:
# ✔ 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 `src/` directory? → Yes
# ✔ Would you like to use App Router? → Yes
# ✔ Would you like to customize the default import alias? → No

# Masuk ke direktori proyek
cd belajar-nextjs

# Jalankan development server
npm run dev

# Output:
#   ▲ Next.js 15.x
#   - Local:        http://localhost:3000
#   - Environments: .env.local

belajar-nextjs/
├── node_modules/
├── public/                 ← File statis (gambar, favicon)
│   ├── next.svg
│   └── vercel.svg
├── src/
│   └── app/                ← App Router (utama)
│       ├── layout.tsx      ← Root layout (wajib)
│       ├── page.tsx        ← Halaman utama (/)
│       ├── globals.css     ← CSS global
│       ├── about/
│       │   └── page.tsx    ← Halaman /about
│       ├── blog/
│       │   ├── page.tsx    ← Halaman /blog
│       │   └── [slug]/
│       │       └── page.tsx ← Halaman /blog/[slug]
│       └── api/
│           └── hello/
│               └── route.ts ← API endpoint /api/hello
├── .env.local              ← Environment variables
├── next.config.js          ← Konfigurasi Next.js
├── package.json
└── tsconfig.json           ← Konfigurasi TypeScript

# Alur Client-Side Rendering (CSR):
#
# 1. User mengakses halaman
# 2. Server mengirim HTML kosong + bundle JS besar
# 3. Browser mengunduh JS (bisa 1-3 detik)
# 4. JavaScript dijalankan → render konten
# 5. User baru bisa melihat dan berinteraksi
#
# ❌ Masalah:
# - Loading lambat (blank screen sampai JS selesai)
# - SEO buruk (search engine melihat HTML kosong)
# - First Contentful Paint (FCP) lama

# Contoh: React SPA biasa dengan React Router
# → Semua rendering terjadi di browser
# → Data di-fetch dari client setelah halaman dimuat

# Alur Server-Side Rendering (SSR):
#
# 1. User mengakses halaman
# 2. Server meng-fetch data dan render komponen
# 3. Server mengirim HTML lengkap ke browser
# 4. Browser langsung menampilkan konten
# 5. JavaScript "hydration" → interaktif
#
# ✅ Keuntungan:
# - Konten langsung terlihat (FCP cepat)
# - SEO sangat baik (search engine dapat HTML lengkap)
# - Cocok untuk konten dinamis yang sering berubah

# Di Next.js, gunakan fungsi ini untuk SSR:
# export async function generateMetadata() { ... }
# fetch() dengan cache: 'no-store'

// src/app/blog/page.tsx
// Secara default, komponen di App Router adalah Server Component
// Jadi fetch() di sini berjalan di server

interface Post {
  id: number;
  title: string;
  body: string;
}

// Komponen ini di-render di server (SSR)
export default async function BlogPage() {
  // Data di-fetch di server — tidak dikirim ke browser
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    cache: 'no-store', // SSR: selalu data terbaru
  });
  const posts: Post[] = await response.json();

  return (
    <main>
      <h1>Daftar Blog</h1>
      <p>Total: {posts.length} artikel</p>
      {posts.slice(0, 10).map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </article>
      ))}
    </main>
  );
}

// src/app/products/page.tsx
// Static generation dengan revalidation setiap 60 detik

export default async function ProductsPage() {
  // next: { revalidate: 60 } = ISR
  // Halaman di-build secara statis, tapi di-regenerate
  // setiap 60 detik jika ada request baru
  const response = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 },
  });
  const products = await response.json();

  return (
    <div>
      <h1>Produk Kami</h1>
      <div className="product-grid">
        {products.map((product: any) => (
          <div key={product.id} className="product-card">
            <h3>{product.name}</h3>
            <p>Rp {product.price.toLocaleString('id-ID')}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

# File-based routing di App Router:
#
# src/app/page.tsx              → /
# src/app/about/page.tsx        → /about
# src/app/blog/page.tsx         → /blog
# src/app/blog/[slug]/page.tsx  → /blog/apa-saja
# src/app/dashboard/
#   ├── layout.tsx               → Layout bersama
#   ├── page.tsx                 → /dashboard
#   ├── settings/page.tsx        → /dashboard/settings
#   └── profile/page.tsx         → /dashboard/profile
#
# Tidak perlu konfigurasi router!
# Cukup buat folder + file page.tsx

// src/app/layout.tsx (file wajib di App Router)
// Ini membungkus semua halaman dalam aplikasi

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

export const metadata: Metadata = {
  title: 'Aplikasi Next.js Saya',
  description: 'Belajar Next.js dengan mudah',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id">
      <body>
        <header>
          <nav>
            <a href="/">Beranda</a>
            <a href="/about">Tentang</a>
            <a href="/blog">Blog</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>&copy; 2026 Aplikasi Saya</p>
        </footer>
      </body>
    </html>
  );
}

// src/app/blog/[slug]/page.tsx
// Route dinamis: /blog/nextjs-dasar, /blog/react-hooks, dll.

interface BlogPostProps {
  params: Promise<{ slug: string }>;
}

export default async function BlogPost({ params }: BlogPostProps) {
  const { slug } = await params;

  // Fetch data berdasarkan slug
  const response = await fetch(`https://api.example.com/posts/${slug}`);
  const post = await response.json();

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.date}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// Generate metadata dinamis untuk SEO
export async function generateMetadata({ params }: BlogPostProps) {
  const { slug } = await params;
  const response = await fetch(`https://api.example.com/posts/${slug}`);
  const post = await response.json();

  return {
    title: post.title,
    description: post.excerpt,
  };
}

// app/posts/page.tsx — Server Component (default, tanpa "use client")
// Bisa langsung akses database, file system, API rahasia

import { db } from '@/lib/database';

export default async function PostsPage() {
  // Langsung query database! API key tetap aman di server
  const posts = await db.query('SELECT * FROM posts ORDER BY created_at DESC');

  return (
    <div>
      <h1>Daftar Postingan</h1>
      {posts.map((post: any) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <time>{new Date(post.created_at).toLocaleDateString('id-ID')}</time>
        </article>
      ))}
    </div>
  );
}

// Komponen ini TIDAK mengirim JavaScript ke browser
// Semua kode di atas hanya berjalan di server
// Database credentials TIDAK pernah sampai ke browser

'use client'; // ← Directive ini WAJIB di baris pertama

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null; // Hindari hydration mismatch

  return (
    <div className="counter">
      <h2>Hitungan: {count}</h2>
      <button onClick={() => setCount(c => c + 1)}>
        Tambah (+1)
      </button>
      <button onClick={() => setCount(c => c - 1)}>
        Kurang (-1)
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

// components/AddToCartButton.tsx — Client Component
'use client';

import { useState } from 'react';

export default function AddToCartButton({ productId }: { productId: string }) {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await fetch('/api/cart', {
      method: 'POST',
      body: JSON.stringify({ productId }),
    });
    setLoading(false);
    alert('Produk ditambahkan ke keranjang!');
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Menambahkan...' : '🛒 Tambah ke Keranjang'}
    </button>
  );
}

// app/products/[id]/page.tsx — Server Component
import AddToCartButton from '@/components/AddToCartButton';
import { db } from '@/lib/database';

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await db.query('SELECT * FROM products WHERE id = ?', [id]);

  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p className="price">Rp {product.price.toLocaleString('id-ID')}</p>
      {/* Client Component di-render di dalam Server Component */}
      <AddToCartButton productId={id} />
    </div>
  );
}

// src/app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';

// GET /api/users
export async function GET(request: NextRequest) {
  // Ambil query parameters
  const searchParams = request.nextUrl.searchParams;
  const page = parseInt(searchParams.get('page') || '1');
  const limit = parseInt(searchParams.get('limit') || '10');

  // Di sini Anda bisa fetch dari database
  const users = [
    { id: 1, nama: 'Budi Santoso', email: 'budi@email.com' },
    { id: 2, nama: 'Sari Dewi', email: 'sari@email.com' },
    { id: 3, nama: 'Andi Pratama', email: 'andi@email.com' },
  ];

  return NextResponse.json({
    success: true,
    data: users,
    pagination: { page, limit, total: users.length },
  });
}

// src/app/api/users/route.ts (tambahkan method lain)

// POST /api/users — Buat user baru
export async function POST(request: NextRequest) {
  try {
    const body = await request.json();

    // Validasi input
    if (!body.nama || !body.email) {
      return NextResponse.json(
        { error: 'Nama dan email wajib diisi' },
        { status: 400 }
      );
    }

    // Simpan ke database (contoh)
    const newUser = {
      id: Date.now(),
      nama: body.nama,
      email: body.email,
    };

    // await db.insert('users', newUser);

    return NextResponse.json(
      { success: true, data: newUser },
      { status: 201 }
    );
  } catch (error) {
    return NextResponse.json(
      { error: 'Gagal membuat user' },
      { status: 500 }
    );
  }
}

// src/app/api/users/[id]/route.ts
// DELETE /api/users/:id — Hapus user
export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;

  // await db.delete('users', id);

  return NextResponse.json({ success: true, message: `User ${id} dihapus` });
}

// 1. Fetch dengan caching (default) — data di-cache
async function getProducts() {
  const res = await fetch('https://api.example.com/products');
  return res.json();
}

// 2. Fetch tanpa caching (SSR) — data selalu terbaru
async function getDashboard() {
  const res = await fetch('https://api.example.com/dashboard', {
    cache: 'no-store', // Setiap request: data baru dari server
  });
  return res.json();
}

// 3. Fetch dengan ISR (revalidate setiap 60 detik)
async function getArticles() {
  const res = await fetch('https://api.example.com/articles', {
    next: { revalidate: 60 }, // Cache 60 detik, lalu regenerate
  });
  return res.json();
}

// 4. Fetch dengan tag (untuk on-demand revalidation)
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { tags: ['posts', `post-${slug}`] },
  });
  return res.json();
}

// Penggunaan di komponen
export default async function HomePage() {
  const products = await getProducts();
  const articles = await getArticles();

  return (
    <div>
      <h1>Beranda</h1>
      <section>
        <h2>Produk Terbaru</h2>
        {products.map((p: any) => (
          <div key={p.id}>{p.name} — Rp {p.price}</div>
        ))}
      </section>
      <section>
        <h2>Artikel Terbaru</h2>
        {articles.map((a: any) => (
          <article key={a.id}>{a.title}</article>
        ))}
      </section>
    </div>
  );
}

'use client';

import { useState, useEffect } from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
}

export default function ProductSearch() {
  const [query, setQuery] = useState('');
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);

  // Fetch data saat query berubah
  useEffect(() => {
    if (!query.trim()) {
      setProducts([]);
      return;
    }

    const controller = new AbortController();

    async function searchProducts() {
      setLoading(true);
      try {
        const res = await fetch(`/api/products?q=${query}`, {
          signal: controller.signal,
        });
        const data = await res.json();
        setProducts(data);
      } catch (err: any) {
        if (err.name !== 'AbortError') {
          console.error('Gagal mencari produk:', err);
        }
      } finally {
        setLoading(false);
      }
    }

    // Debounce: tunggu 300ms setelah user berhenti mengetik
    const timer = setTimeout(searchProducts, 300);

    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [query]);

  return (
    <div className="search">
      <input
        type="text"
        placeholder="Cari produk..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      {loading && <p>Mencari...</p>}
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} — Rp {product.price.toLocaleString('id-ID')}
          </li>
        ))}
      </ul>
    </div>
  );
}

# Cara 1: Deploy via Vercel CLI
# Instal Vercel CLI
npm i -g vercel

# Login ke Vercel
vercel login

# Deploy proyek (jalankan di root proyek)
vercel

# Deploy ke production
vercel --prod

# Cara 2: Deploy via GitHub (Disarankan)
# 1. Push kode ke repository GitHub
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/nextjs-app.git
git push -u origin main

# 2. Buka vercel.com → Import Project
# 3. Pilih repository GitHub Anda
# 4. Vercel otomatis detect Next.js dan deploy
# 5. Setiap push ke main = auto deploy!

# .env.local (jangan commit ke git!)
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_KEY=rahasia-jangan-dibagikan

# Variabel dengan prefix NEXT_PUBLIC_ bisa diakses di browser
# Variabel TANPA prefix hanya bisa diakses di server
# Ini menjaga API key dan secret tetap aman

# Di Vercel Dashboard:
# Project Settings → Environment Variables
# Tambahkan variabel yang sama untuk Production, Preview, Development