Ringkasan Proyek

ts-nextjs-tailwind-starter adalah starter Next.js berbasis App Router yang sudah dilengkapi komponen siap pakai, pengujian, linting, dan otomasi repository. Berkas README.md menyebutnya sebagai starter yang "battery packed" dengan sederet fitur bawaan, mulai dari absolute import sampai sitemap otomatis. README.md:14-35¹

Halaman ini memetakan fitur ke direktori src/ pada commit 9a47d33. Paket inti yang benar-benar terpasang adalah next ^15.4.3, react ^19.1.0, react-dom ^19.1.0, dan tailwindcss ^4.1.11. package.json:20-29²

Peta Fitur ke Direktori

Setiap fitur di README punya rumahnya sendiri di dalam src/. Diagram berikut memetakan fitur ke berkas dan direktori yang benar-benar ada di repository.

graph TD
  root["ts-nextjs-tailwind-starter"]

  subgraph app["src/app — App Router"]
    layout["layout.tsx — metadata & globals.css"]
    page["page.tsx — halaman demo"]
    catalog["components/page.tsx — katalog komponen"]
    route["api/hello/route.ts — GET"]
  end

  subgraph comp["src/components — komponen siap pakai"]
    links["links/ — 6 komponen link"]
    buttons["buttons/ — Button, IconButton, TextButton"]
    image["NextImage.tsx"]
    skeleton["Skeleton.tsx"]
  end

  subgraph lib["src/lib — utilitas"]
    utils["utils.ts — cn()"]
    logger["logger.ts"]
    og["og.ts — openGraph()"]
    helper["helper.ts — storage helpers"]
  end

  subgraph cfg["konfigurasi"]
    siteconfig["constant/config.ts — siteConfig"]
    env["lib/env.ts — envVariables"]
    tscfg["tsconfig.json — paths @/ dan ~/"]
    webpack["next.config.js — SVGR"]
    sitemap["next-sitemap.config.js"]
  end

  root --> app
  root --> comp
  root --> lib
  root --> cfg
  page --> links
  page --> buttons
  catalog --> links
  catalog --> buttons
  page --> siteconfig
  layout --> siteconfig
  page --> env
  logger --> env
  utils --> tscfg
  page --> webpack
  sitemap --> siteconfig
  og --> siteconfig

  style root fill:#2d7d46,color:#fff
  style app fill:#2d7d46,color:#fff
  style comp fill:#8b5cf6,color:#fff
  style lib fill:#8b5cf6,color:#fff
  style cfg fill:#f59e0b,color:#000
  style tscfg fill:#f59e0b,color:#000
  style webpack fill:#f59e0b,color:#000
  style sitemap fill:#f59e0b,color:#000
  style siteconfig fill:#f59e0b,color:#000
  style env fill:#f59e0b,color:#000
%% fig: Peta fitur starter ke direktori src/
%% desc: Fitur README dipetakan ke berkas App Router, komponen, utilitas, dan konfigurasi yang benar-benar ada di repository.

Penopang peta di atas adalah empat kelompok besar. App Router menempati src/app/, tempat layout.tsx memuat globals.css dan menyusun metadata. src/app/layout.tsx:12-50³ Halaman demo page.tsx merangkai ArrowLink, ButtonLink, UnderlineLink, dan UnstyledLink menjadi satu layar perkenalan. src/app/page.tsx:24-43⁴ Satu endpoint contoh tersedia di src/app/api/hello/route.ts lewat fungsi GET yang mengembalikan JSON { hello: 'Next.js' }. src/app/api/hello/route.ts:3-5⁵

Kelompok kedua adalah komponen. Direktori src/components/links/ memuat enam berkas, dan src/components/buttons/ memuat tiga berkas; keduanya dipakai halaman demo serta katalog di src/app/components/page.tsx. Katalog komponen dibahas rinci di Katalog Komponen Pratinjau.

Kelompok ketiga adalah utilitas di src/lib/. Fungsi cn menggabungkan clsx dengan twMerge sehingga kelas Tailwind yang bertabrakan bisa diselesaikan. src/lib/utils.ts:4-7⁶ logger hanya mencetak ketika showLogger bernilai benar. src/lib/logger.ts:9-19⁷ getFromLocalStorage dan getFromSessionStorage menjaga akses storage tetap aman di sisi server. src/lib/helper.ts:1-13⁸ openGraph menyusun URL gambar OG dari siteName, description, templateTitle, dan logo. src/lib/og.ts:10-26⁹

Kelompok keempat adalah konfigurasi. siteConfig menyimpan title, description, dan url yang dipakai metadata serta sitemap. src/constant/config.ts:1-7¹⁰ envVariables memvalidasi process.env dengan zod dan mendeklarasikan tipe ProcessEnv. src/lib/env.ts:9-13¹¹ Pemetaan path @/* ke ./src/* dan ~/* ke ./public/* diatur di tsconfig.json. tsconfig.json:17-20¹² next.config.js menambahkan aturan webpack agar *.svg diimpor sebagai komponen React lewat @svgr/webpack, sementara *.svg?url tetap dilayani file loader. next.config.js:19-49¹³

Ketergantungan Terpasang

Tabel berikut merangkum dependensi runtime dan alat pengembangan yang tercatat di package.json.

Seluruh baris tabel di atas berasal dari blok dependencies dan devDependencies. package.json:20-29² package.json:30-58¹⁴

Skrip yang Tersedia

Ada 13 skrip di package.json. Skrip postbuild menjalankan next-sitemap setelah next build, dan prepare menjalankan husky install saat dependensi dipasang. package.json:5-19¹⁵

Konfigurasi sitemap menetapkan siteUrl https://tsnext-tw.thcl.dev, menyalakan generateRobotsTxt, dan mengizinkan semua user agent. next-sitemap.config.js:5-12¹⁶

⚠️ README masih menyebut Next.js 14 dan React 18, sedangkan package.json sudah memakai next ^15.4.3 dan react ^19.1.0. Bila terjadi selisih perilaku, percayai package.json dan bukan teks README. README.md:18-19¹⁷ package.json:20-29²

CHANGELOG.md mencatat perubahan terakhir di versi 1.0.0 tanggal 2023-07-17: perpindahan ke App Router dan penggantian nama clsxm menjadi cn. Changelog itu juga menyatakan dirinya dibuat manual dan tidak akurat terhadap package.json. CHANGELOG.md:7-23¹⁸

Langkah Berikutnya

Pemasangan dependensi dianjurkan memakai pnpm agar hook Husky bekerja, lalu dijalankan pnpm install. README.md:79-83¹⁹ Urutan lengkap dari clone sampai menjalankan server ada di Memulai. Pembagian direktori dibahas di Arsitektur dan Struktur Direktori, sedangkan perkakas build dan linting dibahas di Konfigurasi Build dan Alat Pengembangan.