NEXTJS-APP-ROUTER DOCS

ROUTING

page.tsx
Description: Halaman yang dirender pada URL tertentu.
Example: 
// app/about/page.tsx
export default function AboutPage() { return <h1>About</h1> }
Output: /about
layout.tsx
Description: Layout pembungkus untuk halaman dan nested layout.
Example: 
// app/layout.tsx
export default function RootLayout({ children }) { return <html><body>{children}</body></html> }
Output: Layout global
loading.tsx
Description: UI loading yang ditampilkan saat halaman/segmen dimuat.
Example: 
// app/dashboard/loading.tsx
export default function Loading() { return <p>Loading...</p> }
Output: Loading UI
error.tsx
Description: Error boundary untuk menangani error di halaman/segmen.
Example: 
'use client';
export default function Error({ error, reset }) { return <button onClick={reset}>Try again</button> }
Output: Error UI
not-found.tsx
Description: UI yang ditampilkan ketika halaman tidak ditemukan.
Example: 
// app/not-found.tsx
export default function NotFound() { return <h1>404 - Not Found</h1> }
Output: 404 UI
route.ts
Description: Route handler untuk membuat API endpoint.
Example: 
// app/api/users/route.ts
export async function GET() { return NextResponse.json([...]) }
Output: /api/users
middleware.ts
Description: Middleware yang dijalankan sebelum request selesai.
Example: 
// middleware.ts
export function middleware(request: NextRequest) { ... }
Output: Middleware
Dynamic Routes
Description: Rute dengan parameter [id], [...slug], [[...slug]].
Example: 
// app/blog/[id]/page.tsx
export default function BlogPost({ params }: { params: { id: string } }) { ... }
Output: /blog/123
Route Groups
Description: Mengelompokkan rute tanpa mempengaruhi URL.
Example: 
// app/(marketing)/about/page.tsx
// app/(dashboard)/settings/page.tsx
Output: URL tetap /about, /settings
Parallel Routes
Description: Render beberapa halaman secara paralel di layout yang sama.
Example: 
// app/@modal/login/page.tsx
// app/@feed/page.tsx
Output: Slot paralel
Intercepting Routes
Description: Mengintersep navigasi untuk menampilkan halaman alternatif (modal, dll).
Example: 
// app/(..)photo/[id]/page.tsx
Output: Intercepting route

SERVER-CLIENT

Server Component (default)
Description: Komponen yang dirender di server. Tidak bisa pakai hook/event handler.
Example: 
export default async function ServerComp() { const data = await fetch(...); return <div>{data}</div> }
Output: Rendered on server
Client Component
Description: Komponen interaktif dengan state/effect/event handler. Gunakan direktif 'use client'.
Example: 
'use client';
import { useState } from 'react';
export default function Counter() { const [count, setCount] = useState(0); ... }
Output: Interaktif
Composition Pattern
Description: Server component bisa wrapping client component.
Example: 
// ServerComp.tsx (tanpa 'use client')
import ClientButton from './ClientButton';
export default function Page() { return <div><ClientButton /></div> }
Output: Client di dalam server
Server Actions
Description: Fungsi async yang berjalan di server, bisa dipanggil dari client/form.
Example: 
'use server';
export async function createPost(formData: FormData) { ... }
Output: Mutasi server

DATA-FETCHING

fetch (server)
Description: Native fetch API di server component, otomatis caching.
Example: 
const data = await fetch('https://api.example.com/data');
Output: Data ter-cache
revalidate (ISR)
Description: Revalidasi data pada interval tertentu.
Example: 
fetch(url, { next: { revalidate: 3600 } });
Output: Revalidate setiap 1 jam
no-store (dynamic)
Description: Selalu ambil data terbaru tanpa cache.
Example: 
fetch(url, { cache: 'no-store' });
Output: Data selalu baru
generateStaticParams
Description: Pre-render halaman dinamis di build time.
Example: 
export async function generateStaticParams() { const posts = await fetch(...); return posts.map(p => ({ id: p.id })) }
Output: Static params
React cache()
Description: Cache hasil fungsi untuk request yang sama (dedup).
Example: 
import { cache } from 'react';
export const getUser = cache(async (id: string) => { ... });
Output: Deduplikasi fetch

NAVIGATION

<Link>
Description: Komponen untuk navigasi client-side dengan prefetch.
Example: 
import Link from 'next/link';
<Link href="/about">About</Link>
Output: Navigasi SPA
useRouter
Description: Hook untuk navigasi programatik (client component).
Example: 
import { useRouter } from 'next/navigation';
const router = useRouter(); router.push('/dashboard');
Output: Navigasi programatik
redirect
Description: Redirect di server component/action.
Example: 
import { redirect } from 'next/navigation';
export async function ServerAction() { redirect('/login') }
Output: Redirect server-side
usePathname
Description: Mendapatkan pathname saat ini (client component).
Example: 
import { usePathname } from 'next/navigation';
const pathname = usePathname();
Output: /about
useSearchParams
Description: Mendapatkan query string (client component).
Example: 
import { useSearchParams } from 'next/navigation';
const searchParams = useSearchParams(); const q = searchParams.get('q');
Output: Query param 'q'

METADATA

Static Metadata
Description: Export objek Metadata dari layout/page.
Example: 
import { Metadata } from 'next';
export const metadata: Metadata = { title: 'Home', description: '...' };
Output: Metadata SEO
Dynamic Metadata
Description: Export fungsi generateMetadata untuk metadata dinamis.
Example: 
export async function generateMetadata({ params }): Promise<Metadata> { return { title: params.id } }
Output: Metadata dinamis

OPTIMASI

next/image
Description: Komponen gambar yang dioptimasi (lazy, blur-up, webp).
Example: 
import Image from 'next/image';
<Image src="/hero.jpg" width={800} height={600} alt="Hero" />
Output: Gambar optimal
next/font
Description: Font optimization (Google Fonts, local).
Example: 
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
<body className={inter.className}>
Output: Font self-host
next/script
Description: Memuat script eksternal dengan strategi (afterInteractive, lazyOnload).
Example: 
import Script from 'next/script';
<Script src="https://example.com/script.js" strategy="lazyOnload" />
Output: Script dimuat malas
next/dynamic
Description: Dynamic import untuk code-splitting komponen.
Example: 
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('./Heavy'), { loading: () => <p>Loading...</p> });
Output: Lazy component

CACHING

revalidatePath
Description: Revalidasi halaman berdasarkan path (server action).
Example: 
import { revalidatePath } from 'next/cache';
revalidatePath('/blog/[slug]', 'page');
Output: Cache halaman dibersihkan
revalidateTag
Description: Revalidasi data berdasarkan tag yang digunakan di fetch.
Example: 
fetch(url, { next: { tags: ['posts'] } });
revalidateTag('posts');
Output: Cache tag 'posts' dibersihkan
unstable_cache (experimental)
Description: Cache function level (mirip React cache).
Example: 
import { unstable_cache } from 'next/cache';
const getCachedData = unstable_cache(async () => { ... }, ['key'], { revalidate: 60 });
Output: Data ter-cache