Memulai

Halaman ini menuntun satu mesin lokal dari repository kosong sampai dev server berjalan. README membagi prosesnya menjadi empat langkah: mengambil template, memasang dependency, menjalankan dev server, lalu mengganti default bawaan README.md:43-45.

graph TD
  clone["Ambil template<br/>template repo / create-next-app / degit / Vercel"] --> install["pnpm install"]
  install --> husky["prepare: husky install"]
  husky --> dev["pnpm dev → next dev"]
  dev --> local["http://localhost:3000"]
  local --> conf{"!STARTERCONF<br/>sudah diganti?"}
  conf -- belum --> edit["Ubah siteConfig, favicon, siteUrl"]
  edit --> ready["Siap dikembangkan"]
  conf -- sudah --> ready
  style clone fill:#f59e0b,color:#000
  style install fill:#f59e0b,color:#000
  style husky fill:#8b5cf6,color:#fff
  style dev fill:#2d7d46,color:#fff
  style local fill:#2d7d46,color:#fff
  style conf fill:#f59e0b,color:#000
  style edit fill:#f59e0b,color:#000
  style ready fill:#2d7d46,color:#fff
%% fig: Alur dari clone sampai dev server lokal
%% desc: Empat cara mengambil template bertemu di pnpm install, hook husky dipasang lewat prepare, lalu pnpm dev menyalakan server di port 3000 sebelum default bawaan diganti.

Fig. 1: Alur dari clone sampai dev server lokalEmpat cara mengambil template bertemu di pnpm install, hook husky dipasang lewat prepare, lalu pnpm dev menyalakan server di port 3000 sebelum default bawaan diganti.

Prasyarat: Node dan pnpm

.nvmrc mematok Node v20.10.0 .nvmrc:1-1, dan README mendorong pemakaian pnpm agar hook husky bekerja dengan benar README.md:79.

Berkas	Nilai	Efek saat memulai
`.nvmrc`	`v20.10.0`	versi Node yang dipakai proyek .nvmrc:1-1
`.npmrc`	`enable-pre-post-scripts=true`	pre/post script dijalankan pnpm, termasuk `postbuild` yang memanggil `next-sitemap` .npmrc:1-1 package.json:17
`package.json`	`prepare: husky install`	hook husky terpasang setiap kali dependency dipasang package.json:18

Mengambil template

README menulis "three ways", tetapi daftarnya memuat empat item karena opsi deploy ke Vercel ikut dihitung README.md:73-75. Pilih satu saja.

Cara	Perintah atau aksi	Catatan
Pakai sebagai template	tombol "Use this repository as template" di GitHub	memunculkan attribution pada repository hasil README.md:47-53
`create-next-app`	`pnpm create next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm`	branch `pages-directory` tidak dirawat aktif README.md:55-65
`degit`	`npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME`	menyalin berkas tanpa riwayat commit README.md:67-71
Deploy ke Vercel	tombol Deploy with Vercel	melewati langkah lokal sepenuhnya README.md:73-75

Memasang dependency

Jalankan pnpm install di akar proyek README.md:81-83. Perintah ini memicu script prepare yang menjalankan husky install, sehingga direktori .husky berisi pre-commit, commit-msg, dan post-merge siap dipakai.

⚠️ README hanya menganjurkan pnpm; memakai package manager lain berada di luar jalur yang didokumentasikan README.md:79.

Detail perintah lain seperti lint, typecheck, dan build ada di Konfigurasi Build dan Alat Pengembangan.

Menjalankan dev server

Script dev di package.json menjalankan next dev package.json:6, jadi cukup pnpm dev README.md:89-91. Buka http://localhost:3000 di browser untuk melihat hasilnya README.md:93.

⚠️ README menyuruh mengubah src/pages/index.tsx README.md:93. Repository ini memakai App Router, sehingga halaman utama ada di src/app/page.tsx lewat export default function HomePage() src/app/page.tsx:24. Struktur lengkapnya dibahas di Arsitektur dan Struktur Direktori dan App Router, Layout, dan Metadata.

Mengganti default `!STARTERCONF`

README meminta mencari semua komentar !STARTERCONF lalu mengikuti panduannya README.md:95-99. Di src/app/page.tsx ada petunjuk untuk menyorot !STARTERCONF lalu menekan CMD + SHIFT + F src/app/page.tsx:20.

Berkas	Yang perlu diubah
`src/constant/config.ts`	`title`, `description`, dan `url` situs src/constant/config.ts:1-6
`next-sitemap.config.js`	`siteUrl` untuk sitemap dan robots.txt next-sitemap.config.js:6-8
`src/app/layout.tsx`	`metadata` default, termasuk `metadataBase` dan Open Graph src/app/layout.tsx:10-11
`src/app/layout.tsx`	favicon dan manifest, salin berkas baru ke folder `/favicon` src/app/layout.tsx:20-26
`src/app/layout.tsx`	hapus import `@/styles/colors.css` karena hanya untuk demo src/app/layout.tsx:5-6
`src/styles/colors.css`	hapus berkas ini setelah menyalin warna yang dipakai src/styles/colors.css:1
`src/app/page.tsx`	halaman demo, boleh diganti isinya src/app/page.tsx:24
`src/lib/og.ts`	endpoint generator Open Graph, self-host kalau situs ramai src/lib/og.ts:7-9
`src/__tests__/pages/HomePage.test.tsx`	test untuk halaman demo, boleh dihapus src/__tests__/pages/HomePage.test.tsx:1
`CHANGELOG.md`	changelog starter, boleh dihapus CHANGELOG.md:1

Environment variable opsional

.env.example disalin menjadi .env.local .env.example:1, dan satu-satunya isinya adalah NEXT_PUBLIC_SHOW_LOGGER="false" .env.example:5-6. Nilai itu divalidasi zod sebagai enum 'true' atau 'false' yang opsional src/lib/env.ts:9-13, lalu dibaca sebagai showLogger src/constant/env.ts:4-5.

⚠️ Berkas contoh menuliskan agar variabel ini tidak ditambahkan ke environment deploy produksi .env.example:3-4.

Penjelasan lengkap logger dan validasi environment ada di Utilitas, Logger, dan Environment. Setelah server berjalan, lanjutkan ke Pengujian dengan Jest dan Otomasi Repository: Husky, Commitlint, dan CI.