Next.js 18: Framework React Modern untuk 2026 | Ilmu Komputer

Next.js 18 hadir dengan gebrakan besar: Partial Prerendering (PPR) stabil, Server Actions mature, dan React Server Components sebagai default. Framework React ini semakin menjadi pilihan utama untuk web development modern.

Apa itu Next.js?

Next.js adalah framework React full-stack yang dikembangkan oleh Vercel. Dengan Next.js, Anda bisa membuat aplikasi web yang cepat dengan SSR (Server-Side Rendering), SSG (Static Site Generation), dan fitur modern lainnya tanpa konfigurasi rumit.

Fitur Baru Next.js 18

Partial Prerendering (PPR) — Kombinasi static + dynamic dalam satu halaman
Server Actions Mature — Form handling tanpa JavaScript client
React Server Components Default — Komponen jalan di server
Streaming & Suspense — Load konten secara progresif
Built-in SEO — Metadata API, sitemap, robots.txt auto

Setup Project

npx create-next-app@latest my-app
cd my-app
npm run dev

Contoh Server Component

// app/page.tsx — Server Component default
async function getPosts() {
    const res = await fetch('https://api.example.com/posts');
    return res.json();
}

export default async function Home() {
    const posts = await getPosts();
    return (
        <main>
            <h1>Blog Posts</h1>
            {posts.map(post => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                </article>
            ))}
        </main>
    );
}

Partial Prerendering

// Komponen dengan PPR — static shell + dynamic content
export default function ProductPage({ params }) {
    return (
        <div>
            <Header />  {/* Static — di-cache */}
            <ProductDetail id={params.id} />  {/* Dynamic */}
            <RelatedProducts />  {/* Static lagi */}
        </div>
    );
}

Lokasi: