17 Februari 2025·12 menit baca

Next.js App Architecture: Pola yang Scalable

Membangun aplikasi Next.js yang bisa tumbuh besar membutuhkan lebih dari sekadar fitur yang bekerja. Kamu butuh arsitektur yang solid dari awal.

Struktur Folder yang Scalable

Struktur folder yang baik adalah fondasi dari codebase yang maintainable. Pisahkan berdasarkan concern: app/ untuk routing, components/ untuk UI, lib/ untuk utilities, dan services/ untuk business logic.

bash·Folder Structure

src/
├── app/
│   ├── (auth)/          # Route group — tidak memengaruhi URL
│   │   ├── login/page.tsx
│   │   └── register/page.tsx
│   ├── (dashboard)/
│   │   ├── layout.tsx   # Layout khusus dashboard
│   │   └── page.tsx
│   └── api/
├── components/
│   ├── ui/              # Button, Input, Modal, dll
│   └── features/        # Feature-specific components
├── lib/                 # Utilities, db, auth
├── hooks/               # Custom React hooks
├── stores/              # State management
├── types/               # TypeScript definitions
└── services/            # API service layer

Server Actions — The New API Layer

Server Actions di Next.js 14+ memungkinkan kamu memanggil fungsi server langsung dari Client Components, tanpa perlu membuat API route terpisah. Ini menyederhanakan arsitektur secara signifikan.

tsx·Server Action

// app/actions/user.ts
"use server";

import { revalidatePath } from "next/cache";

export async function updateProfile(formData: FormData) {
  const name = formData.get("name") as string;

  if (!name || name.length < 2) {
    return { error: "Nama minimal 2 karakter" };
  }

  await db.user.update({ where: { id }, data: { name } });

  revalidatePath("/profile");
  return { success: true };
}

Data Layer dengan cache()

tsx·Service Layer

// services/userService.ts
import { cache } from "react";

// cache() — deduplicates requests dalam satu render pass
export const getUserById = cache(async (id: string) => {
  return db.user.findUnique({
    where: { id },
    select: { id: true, name: true, email: true },
  });
});

// Jika dipanggil dari 2 komponen berbeda dengan id sama,
// database hanya di-query SEKALI!

🏗️ Prinsip kunci: Pisahkan concerns dengan jelas — Server Components untuk data fetching, Client Components hanya untuk interaktivity, Server Actions untuk mutations, dan service layer untuk business logic.