# Skill Layer — Framework: Next.js (App Router)

File ini menginstruksikan AI tentang *best practices* mutakhir untuk **Next.js (App Router)**. Gunakan skill ini agar AI tidak menulis kode bergaya React usang atau struktur Next.js 12 lama (Pages Router).

---

## Arsitektur & Paradigma Utama
- **App Router Default:** Ingat bahwa semua komponen di dalam direktori `app/` secara default adalah **React Server Components (RSC)**.
- **Client Boundary:** Gunakan direktif `"use client"` se-spesifik mungkin di ujung pohon komponen (*leaf nodes*) yang benar-benar membutuhkan interaktivitas (seperti `useState`, `onClick`, browser APIs). Biarkan komponen pembungkusnya tetap menjadi *Server Components*.
- **Data Fetching Murni:** Dilarang menggunakan `useEffect` hanya untuk sekadar memanggil API awal. Gunakan *fetch* langsung di dalam Server Component secara *async/await*.

## Standar Penulisan Kode
1. **Routing:** Manfaatkan struktur file bawaan secara disiplin (`page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`, dan `not-found.tsx`).
2. **Server Actions:** Gunakan direktif `"use server"` untuk fungsi mutasi data (seperti submit formulir). Hindari membuat *API Route* (`route.ts`) jika kebutuhannya dapat diselesaikan dengan mulus melalui *Server Action*.
3. **Optimisasi Bawaan:** Wajib menggunakan `<Image>` dari `next/image` untuk performa gambar, dan `<Link>` dari `next/link` untuk navigasi *client-side*. Dilarang menggunakan tag `<img>` atau `<a>` HTML standar.
4. **Metadata SEO:** Ekspor objek `metadata` atau fungsi `generateMetadata` di setiap halaman untuk memastikan SEO yang kuat sejak awal.

## Guardrails Keamanan & Performa
- Dilarang membocorkan *environment variables* rahasia. Hanya variabel yang memiliki awalan `NEXT_PUBLIC_` yang diizinkan untuk diekspos/dipanggil di *Client Components*.
- Hindari penggunaan *React Context Providers* berskala global yang membungkus seluruh `layout.tsx` root (karena akan memaksa seluruh halaman turunannya memuat Javascript tambahan di klien), kecuali mutlak dibutuhkan.