Panduan Lengkap Setup Next.js 15 dengan App Router di 2026

Next.js 15 baru saja dirilis dengan fitur App Router yang lebih powerful, dukungan React 19, dan built-in Edge Runtime. Tutorial ini mengajarkan cara menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 15 secara step‑by‑step, lengkap dengan contoh kode dan best practice untuk pengembangan modern.

1. Persiapan Lingkungan

Pastikan mesin Anda memenuhi persyaratan berikut:

• Node.js v20.10+ (LTS)
• npm v10+ atau yarn v2
• Git untuk version control
• Editor kode (VS Code disarankan dengan ekstensi ESLint dan Prettier)

1.1 Install Node.js

# Menggunakan nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20

1.2 Verifikasi Instalasi

node -v    # harus 20.x.x
npm -v     # harus 10.x.x

2. Membuat Proyek Next.js 15 Baru

Next.js 15 hadir dengan create-next-app@latest yang otomatis mengaktifkan App Router.

npx create-next-app@latest my-next15-app --ts --eslint --src-dir --app
cd my-next15-app

Opsi yang dipilih:

• --ts: TypeScript sebagai bahasa utama.
• --eslint: Linter terintegrasi.
• --src-dir: Struktur src/ yang bersih.
• --app: Mengaktifkan App Router secara default.

3. Struktur Direktori Baru (App Router)

src/
├─ app/
│  ├─ layout.tsx        # Root layout
│  ├─ page.tsx          # Home page
│  ├─ (admin)/
│  │   ├─ layout.tsx    # Layout khusus admin
│  │   └─ dashboard/
│  │       └─ page.tsx # Halaman dashboard
│  └─ api/
│      └─ hello/route.ts # API route (Edge Runtime)
└─ components/
   └─ Navbar.tsx

4. Instalasi Dependensi Tambahan

Untuk meningkatkan produktivitas, tambahkan beberapa paket populer:

# UI & styling
npm i tailwindcss@latest postcss@latest autoprefixer@latest
# State management (optional)
npm i zustand@latest
# Data fetching dengan SWR
npm i swr@latest
# Linter/formatter tambahan
npm i -D prettier eslint-config-prettier

4.1 Inisialisasi TailwindCSS

npx tailwindcss init -p

Ubah tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambah Tailwind directives ke src/app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Konfigurasi Next.js untuk Edge Runtime

Next.js 15 memperkenalkan Edge Runtime secara default untuk API routes. Pastikan file route berada di src/app/api/ dan export runtime: 'edge' jika diperlukan.

// src/app/api/hello/route.ts
import { NextResponse } from 'next/server';
export const runtime = 'edge';
export async function GET() {
  return NextResponse.json({ message: 'Hello from Edge Runtime!' });
}

6. Membuat Halaman Utama dengan Layout

// src/app/layout.tsx
import './globals.css';
import Navbar from '@/components/Navbar';

export const metadata = {
  title: 'Next.js 15 Demo',
  description: 'Demo project dengan App Router dan Edge Runtime',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
        {children}
      
    
  );
}

// src/app/page.tsx
export default function Home() {
  return (
    

      
Welcome to Next.js 15
      
This project uses the new App Router, TypeScript, and TailwindCSS.
    
  );
}

7. State Management dengan Zustand (Optional)

// src/store/useAuthStore.ts
import { create } from 'zustand';
interface AuthState {
  user: string | null;
  login: (name: string) => void;
  logout: () => void;
}
export const useAuthStore = create((set) => ({
  user: null,
  login: (name) => set({ user: name }),
  logout: () => set({ user: null }),
}));

8. Data Fetching dengan SWR

// src/components/Quote.tsx
import useSWR from 'swr';
const fetcher = (url: string) => fetch(url).then((r) => r.json());
export default function Quote() {
  const { data, error } = useSWR('/api/quote', fetcher);
  if (error) return 
Failed to load.
;
  if (!data) return 
Loading...
;
  return 
{data.text}
;
}

9. Optimasi Produksi

• Image Optimization: Gunakan next/image dengan loader: 'custom' bila hosting di CDN khusus.
• Static Export: Jalankan next build && next export untuk situs statis bila tidak butuh server.
• Incremental Static Regeneration (ISR): Tambahkan revalidate pada fetch di server components.
• Headless CMS Integration: Contoh dengan Strapi atau Contentful – fetch di layout.tsx untuk global data.

10. Deploy ke Vercel (Recommended)

1. Push repository ke GitHub.
2. Buka Vercel dan pilih New Project.
3. Hubungkan repo, Vercel akan otomatis mendeteksi Next.js 15 dan mengatur build serta output (Edge).
4. Set environment variables (mis. NEXT_PUBLIC_API_URL) di Settings > Environment Variables.
5. Deploy! Vercel memberikan preview URL tiap push.

11. Best Practices untuk Next.js 15

• Gunakan Server Components: pindahkan logic berat ke server side untuk mengurangi bundle size.
• Colocation: Simpan API route, UI component, dan style di dalam folder yang sama (feature‑based).
• Typed Route Handlers: Pakai next/server TypeScript definitions untuk safety.
• Cache Control: Pada Edge API routes, tambahkan Cache-Control header untuk CDN caching.

  return new Response(JSON.stringify(data), { headers: { 'Cache-Control': 's‑maxage=60, stale‑while‑revalidate=30' } });

• Linting & Formatting CI: Tambahkan script di package.json:

  "scripts": {
    "lint": "next lint",
    "format": "prettier --write ."
  }

  Lalu integrasikan ke GitHub Actions.

12. Contoh CI/CD dengan GitHub Actions

name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint && npm run format -- --check
      - run: npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .

13. Debugging Tips

• Gunakan next dev dengan --inspect untuk attach debugger.
• Untuk Edge Runtime, periksa logs di Vercel dashboard > Functions.
• Gunakan React DevTools dan Next.js DevTools (extension Chrome) untuk inspeksi server / client components.

14. Kesimpulan

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki proyek Next.js 15 yang modern, teroptimasi, dan siap produksi. Manfaatkan App Router untuk struktur yang bersih, Edge Runtime untuk latensi rendah, serta integrasi toolchain seperti Tailwind, Zustand, dan SWR untuk pengalaman developer yang cepat dan menyenangkan.

Next.js 15 menawarkan kombinasi kuat antara React 19, App Router, dan Edge Runtime, menjadikannya pilihan utama untuk aplikasi web modern. Ikuti tutorial ini untuk menyiapkan proyek dari nol, mengintegrasikan styling, state management, serta CI/CD, dan terapkan best practice agar aplikasi Anda scalable, performant, dan mudah dipelihara.

---

Panduan lengkap setup Next.js 15 dengan App Router, TypeScript, TailwindCSS, dan deployment ke Vercel. Tutorial step-by-step untuk developer modern.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding