NEXTJS-PAGES-ROUTER DOCS

ROUTING-PAGES

pages/index.tsx
Description: Halaman utama (/) di folder pages.
Example: 
// pages/index.tsx
export default function Home() { return <h1>Home</h1> }
Output: localhost:3000/
pages/about.tsx
Description: Halaman statis dengan nama file sebagai rute.
Example: 
// pages/about.tsx
export default function About() { return <h1>About</h1> }
Output: /about
pages/[slug].tsx
Description: Rute dinamis dengan parameter.
Example: 
// pages/posts/[id].tsx
export default function Post({ id }) { return <p>Post {id}</p> }
Output: /posts/123
pages/[...slug].tsx
Description: Catch-all route.
Example: 
// pages/docs/[...params].tsx
export default function Docs({ params }) { return <p>{params.join('/')}</p> }
Output: /docs/a/b/c
pages/api/hello.ts
Description: API route di Pages Router.
Example: 
// pages/api/hello.ts
export default function handler(req, res) { res.status(200).json({ name: 'John' }) }
Output: /api/hello

DATA-FETCHING

getServerSideProps
Description: Fetch data setiap request (SSR).
Example: 
export async function getServerSideProps() { const data = await fetch(...); return { props: { data } } }
Output: Props di halaman
getStaticProps
Description: Fetch data saat build time (SSG).
Example: 
export async function getStaticProps() { const data = await fetch(...); return { props: { data }, revalidate: 60 } }
Output: Props statik + ISR
getStaticPaths
Description: Tentukan path dinamis yang akan di-generate static.
Example: 
export async function getStaticPaths() { const posts = await fetch(...); const paths = posts.map(p => ({ params: { id: p.id } })); return { paths, fallback: false } }
Output: Path static
getInitialProps
Description: Cara lama (bisa digunakan di _app). Masih ada tapi tidak disarankan.
Example: 
Page.getInitialProps = async (ctx) => { return { data: '...' } }
Output: Props awal

RENDERING

Server-Side Rendering (SSR)
Description: Halaman dirender di server per request menggunakan getServerSideProps.
Example: 
export async function getServerSideProps() { ... }
Output: HTML segar per request
Static Site Generation (SSG)
Description: Halaman di-generate saat build dengan getStaticProps.
Example: 
export async function getStaticProps() { ... }
Output: HTML statik
Incremental Static Regeneration (ISR)
Description: Perbarui halaman statis di background setelah build.
Example: 
return { props: { ... }, revalidate: 60 }
Output: Diperbarui tiap 60 detik
Client-Side Rendering (CSR)
Description: Fetch data dari client menggunakan useEffect atau SWR.
Example: 
useEffect(() => { fetch('/api/data').then(...) }, [])
Output: Data muncul setelah load

COMPONENTS

next/head
Description: Komponen untuk mengisi tag <head>.
Example: 
import Head from 'next/head';
<Head><title>My Page</title></Head>
Output: Judul halaman
next/image
Description: Komponen gambar yang dioptimasi (wajib properti width/height).
Example: 
import Image from 'next/image';
<Image src="/hero.jpg" width={800} height={600} alt="Hero" />
Output: Gambar optimal
next/link
Description: Navigasi client-side dengan prefetch otomatis.
Example: 
import Link from 'next/link';
<Link href="/about">About</Link>
Output: Navigasi SPA
next/script
Description: Memuat script eksternal dengan strategi tertentu.
Example: 
import Script from 'next/script';
<Script src="https://example.com/script.js" strategy="lazyOnload" />
Output: Script tertunda

ROUTER

useRouter
Description: Hook untuk mengakses router (push, replace, query, dll).
Example: 
import { useRouter } from 'next/router';
const router = useRouter();
router.push('/login')
Output: Navigasi programatik
withRouter
Description: HOC untuk menyuntikkan router ke komponen (class component).
Example: 
import { withRouter } from 'next/router';
function Page({ router }) { ... }
export default withRouter(Page);
Output: Props router
router.query
Description: Mendapatkan query string dari URL.
Example: 
const { id } = router.query;
Output: Parameter URL

API-ROUTES

req.method
Description: Cek HTTP method di API route.
Example: 
if (req.method === 'POST') { ... }
Output: GET, POST, dll
req.query
Description: Akses query string di API.
Example: 
req.query.id
Output: Nilai query
req.body
Description: Body request (sudah di-parse).
Example: 
const { name } = req.body;
Output: Data yang dikirim
res.status(code).json(data)
Description: Kirim respons JSON dengan status code.
Example: 
res.status(200).json({ ok: true })
Output: Respons JSON

CONFIGURATION

next.config.js
Description: File konfigurasi Next.js.
Example: 
module.exports = { reactStrictMode: true, swcMinify: true }
Output: Konfigurasi diaktifkan
Environment Variables
Description: Gunakan .env.local untuk menyimpan variabel.
Example: 
NEXT_PUBLIC_API_URL=https://api.example.com
Output: process.env.NEXT_PUBLIC_API_URL
Custom App (`_app.tsx`)
Description: Komponen pembungkus semua halaman.
Example: 
// pages/_app.tsx
export default function MyApp({ Component, pageProps }) { return <Layout><Component {...pageProps} /></Layout> }
Output: Layout global
Custom Document (`_document.tsx`)
Description: Kustomisasi struktur HTML (misal menambah lang, font).
Example: 
// pages/_document.tsx
export default function Document() { return <Html lang="id">...</Html> }
Output: Struktur HTML

MIDDLEWARE

Middleware (Pages Router)
Description: File `_middleware.ts` di dalam folder pages untuk menjalankan logika sebelum request.
Example: 
// pages/_middleware.ts
export function middleware(req) { return NextResponse.next() }
Output: Middleware berjalan

ERROR-HANDLING

pages/404.tsx
Description: Halaman kustom untuk 404.
Example: 
// pages/404.tsx
export default function NotFound() { return <h1>404 - Not Found</h1> }
Output: Halaman 404
pages/_error.tsx
Description: Halaman error kustom untuk server/client error.
Example: 
// pages/_error.tsx
export default function Error({ statusCode }) { return <p>{statusCode} error</p> }
Output: Halaman error
getStaticProps fallback
Description: fallback: true atau 'blocking' untuk halaman yang belum di-generate.
Example: 
return { paths, fallback: 'blocking' }
Output: Halaman di-generate on-demand