React & Next.js Development Standards

Official Documentation

Untuk dokumentasi lengkap, kunjungi:

• Next.js Documentation
• React Documentation

Ecosystem & Plugins:

• Tailwind CSS (Styling)
• shadcn/ui (Components)
• TanStack Query (Data Fetching)
• Zustand (State Management)
• Zod (Validation)

Local Environment Setup

Setup lengkap environment development Next.js (Bun/npm, ESLint, Lefthook, Drizzle/Prisma, Better Auth, Playwright, shadcn/ui) → next-local-env|Next.js Local Environment Setup

Project Layout

App Router

Gunakan App Router (bukan Pages Router) untuk semua project baru.

// app/users/page.tsx
export default async function UsersPage() {
  const users = await getUsers();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Data Fetching

Gunakan TanStack Query untuk client-side fetching:

"use client";

import { useQuery } from "@tanstack/react-query";

export function UserList() {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });

  if (isLoading) return <Spinner />;
  return (
    <ul>
      {data?.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

Component Patterns

• Functional components saja.
• Custom hooks untuk logic reusable.
• Server Components default, Client Components hanya untuk interaktif.

// Server Component (default)
export default function UserCard({ user }: Props) {
  return <div>{user.name}</div>;
}

// Client Component (interactive)
("use client");

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

State Management

• Local state: useState, useReducer
• Server state: TanStack Query
• Global state: Zustand (lightweight) atau Context API untuk simple case
• Jangan pakai Redux kecuali benar-benar perlu.

Styling

Gunakan Tailwind CSS atau shadcn/ui.

// Tailwind
<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  Submit
</button>

Testing

# Unit test
pnpm vitest

# E2E
pnpm playwright test

Routing

App Router structure:

Route Handlers (API Routes)

Gunakan App Router untuk membuat API Endpoint:

// app/api/users/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const users = await db.user.findMany();
  return NextResponse.json({ success: true, data: users });
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.user.create({ data: body });
  return NextResponse.json({ success: true, data: user }, { status: 201 });
}

Server Actions

Gunakan Server Actions untuk mutasi data langsung dari komponen React:

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

import { revalidatePath } from "next/cache";

export async function updateUser(formData: FormData) {
  const name = formData.get("name");
  await db.user.update({ data: { name } });
  revalidatePath("/users");
}

// Komponen
import { updateUser } from "./actions";

export function EditForm() {
  return (
    <form action={updateUser}>
      <input name="name" />
      <button type="submit">Update</button>
    </form>
  );
}

Middleware

Gunakan middleware untuk proteksi route (Auth/Redirects) secara global:

// middleware.ts di root project
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const token = request.cookies.get("token");

  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  return NextResponse.next();
}

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

Authentication

Rekomendasi implementasi Auth di Next.js:

• NextAuth.js (Auth.js): Untuk setup standar dengan OAuth (Google, GitHub) atau Credentials.
• Better Auth: Untuk solusi auth yang lebih modern, cepat, dan type-safe.
• Clerk / Supabase Auth: Untuk solusi managed (SaaS) tanpa pusing manage session.