Next.js Documentation
Panduan penggunaan Next.js tanpa folder src/, mulai dari setup project, sistem routing, pembuatan API routes, hingga proses deployment ke Vercel.
Setup & Installation
Langkah Setup
Membuat project Next.js dengan TypeScript dan TailwindCSS langsung di root (tanpa folder src)
npx create-next-app@latest my-app --typescript --tailwind
cd my-app
npm run dev
⚙️ Secara default, Next.js versi 14+ sudah menempatkan folder app/ di root.
Struktur Folder
Struktur Tanpa Folder src
Struktur minimal project Next.js modern (Oktober 2025)
my-app/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── api/
│ └── hello/route.ts
├── components/
│ ├── ui/
│ └── CodeBlock.tsx
├── public/
│ └── favicon.ico
├── styles/
│ └── globals.css
├── package.json
└── tailwind.config.ts
Pages & Routing
File-based Routing
Sistem routing otomatis berdasarkan struktur folder di dalam app/
app/page.tsx → /
app/about/page.tsx → /about
app/blog/[id]/page.tsx → /blog/:id
API Routes
Membuat API
Gunakan folder app/api/ untuk membuat endpoint API di Next.js 14+
app/api/hello/route.ts → /api/hello
export async function GET() {
return Response.json({ message: "Hello World" })
}
Deployment
Build & Deploy
Deploy ke Vercel atau platform lain seperti Netlify, Render, atau Node server
npm run build
npm start
vercel deploy
🚀 Vercel adalah platform resmi untuk hosting Next.js — tinggal konek akun GitHub kamu dan klik "Deploy".