TypeScript untuk Next.js

Page dengan Params Bertipe

Di App Router, halaman menerima params dan searchParams. Ketik keduanya:

interface HalamanProps {
  params: { slug: string };
  searchParams: { halaman?: string };
}

export default function Artikel({ params, searchParams }: HalamanProps) {
  return <h1>Artikel: {params.slug}</h1>;
}

Next.js versi baru memakai params sebagai Promise di beberapa versi, jadi cek dokumentasi versi yang kamu pakai. Polanya tetap sama: definisikan interface, pakai sebagai tipe props.

Server Component Async

interface Pengguna {
  id: number;
  nama: string;
}

async function daftarPengguna(): Promise<Pengguna[]> {
  const res = await fetch("https://api.example.com/pengguna");
  if (!res.ok) throw new Error("Gagal memuat");
  return res.json() as Promise<Pengguna[]>;
}

export default async function Halaman() {
  const data = await daftarPengguna(); // Pengguna[], ter-infer
  return (
    <ul>
      {data.map((p) => (
        <li key={p.id}>{p.nama}</li>
      ))}
    </ul>
  );
}

fetch mengembalikan Promise<any> untuk .json(), jadi assertion ke tipe yang kamu harapkan adalah praktik standar. Untuk validasi beneran, pakai Zod di sini.

Client Component Tetap Sama Aturannya

"use client";

import { useState } from "react";

export default function Counter() {
  const [angka, setAngka] = useState(0);
  return <button onClick={() => setAngka(angka + 1)}>{angka}</button>;
}

Directive "use client" tidak mengubah aturan TypeScript sama sekali. Props, state, dan event diketik persis seperti di React biasa (modul sebelumnya).

Metadata Bertipe

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Belajar TypeScript",
  description: "Tutorial TypeScript dari nol sampai mahir.",
};

Metadata memastikan field yang kamu tulis valid. Salah ketik descripton langsung error, bukan metadata yang hilang diam-diam.

Catatan teknis: next.config punya opsi typescript.ignoreBuildErrors yang kalau true membuat build lolos walau ada type error. Jangan aktifkan kecuali darurat sesaat. Build yang hijau padahal tipenya merah menghilangkan seluruh nilai TypeScript di production. Biarkan build gagal dan perbaiki errornya.