Tutorial: Membangun Aplikasi Full-Stack dengan Next.js 16 dan App Router

Next.js 16 hadir dengan fitur-fitur canggih yang mempermudah pengembangan aplikasi full-stack. Dalam tutorial ini, kita akan membangun aplikasi lengkap dari awal.

Apa yang Akan Kita Bangun?

Kita akan membangun sebuah Blog Platform dengan fitur:

• Server-side rendering (SSR) dan Static Site Generation (SSG)
• API Routes untuk backend
• Autentikasi JWT
• Database PostgreSQL dengan Prisma ORM
• Responsive design dengan Tailwind CSS

Langkah 1: Setup Project

npx create-next-app@latest my-blog --typescript --tailwind --app --src-dir
cd my-blog

Langkah 2: Konfigurasi Prisma ORM

Install Prisma dan setup database:

npm install @prisma/client
npm install -D prisma
npx prisma init

Buat schema di prisma/schema.prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        String   @id @default(cuid())
  title     String
  slug      String   @unique
  content   String
  published Boolean  @default(false)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Langkah 3: Membuat API Route

Buat file src/app/api/posts/route.ts:

import { NextResponse } from 'next/server';
import prisma from '@/lib/prisma';

export async function GET() {
  const posts = await prisma.post.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' },
  });
  return NextResponse.json(posts);
}

export async function POST(request: Request) {
  const body = await request.json();
  const post = await prisma.post.create({
    data: {
      title: body.title,
      slug: body.title.toLowerCase().replace(/\s+/g, '-'),
      content: body.content,
      published: body.published ?? false,
    },
  });
  return NextResponse.json(post, { status: 201 });
}

Langkah 4: Membuat Halaman dengan Server Components

// src/app/blog/page.tsx
import prisma from '@/lib/prisma';
import Link from 'next/link';

export default async function BlogPage() {
  const posts = await prisma.post.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' },
  });

  return (
    <div className="max-w-4xl mx-auto py-10">
      <h1 className="text-3xl font-bold mb-8">Blog</h1>
      {posts.map((post) => (
        <article key={post.id} className="mb-6 p-6 border rounded-lg">
          <Link href={`/blog/${post.slug}`}>
            <h2 className="text-xl font-semibold hover:text-blue-600">
              {post.title}
            </h2>
          </Link>
          <time className="text-sm text-gray-500">
            {new Date(post.createdAt).toLocaleDateString('id-ID')}
          </time>
        </article>
      ))}
    </div>
  );
}

Langkah 5: Dynamic Routes dengan generateStaticParams

// src/app/blog/[slug]/page.tsx
import prisma from '@/lib/prisma';
import { notFound } from 'next/navigation';

export async function generateStaticParams() {
  const posts = await prisma.post.findMany({
    where: { published: true },
    select: { slug: true },
  });
  return posts.map((post) => ({ slug: post.slug }));
}

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

  if (!post) notFound();

  return (
    <article className="max-w-3xl mx-auto py-10 prose">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

Tips Best Practice

1. Gunakan Server Components sebagai default — hanya tambahkan 'use client' jika benar-benar perlu
2. Validasi input di setiap API route
3. Gunakan Prisma singleton untuk menghindari connection leak
4. Implementasi error handling yang proper di setiap endpoint
5. Leverage caching dengan revalidatePath dan revalidateTag

Kesimpulan

Next.js 16 dengan App Router memberikan developer experience yang luar biasa untuk membangun aplikasi full-stack modern. Dengan kombinasi Server Components, API Routes, dan Prisma ORM, Anda bisa membangun aplikasi yang performant dan scalable.

Sumber kode lengkap tersedia di portfolio kami. Hubungi kami untuk training atau konsultasi Next.js.