Panduan Lengkap Setup Next.js 14 dengan App Router, Server Components, dan Edge Runtime (June 2026)

Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini menuntun Anda langkah demi langkah mulai dari instalasi, konfigurasi, hingga contoh kode praktis, lengkap dengan best practice untuk keamanan, performa, dan deployment di Vercel.

1. Prasyarat

• Node.js versi 20.12+ (LTS) – unduh di nodejs.org
• npm atau yarn (npm 10.x direkomendasikan)
• Git untuk version control
• Akun Vercel (opsional, tapi paling mudah untuk deploy Edge)

2. Instalasi Next.js 14

1. Buatan project baru dengan perintah resmi:

   npx create-next-app@latest my-next14-app --ts --eslint --tailwind

   Parameter:
   • --ts: TypeScript starter
   • --eslint: Linter preset
   • --tailwind: Integrasi Tailwind CSS
2. Masuk ke folder project:

   cd my-next14-app

3. Pastikan versi Next.js adalah 14.x:

   npm list next

   Jika masih 13.x, upgrade dengan:

   npm install next@latest

3. Mengaktifkan App Router (App Directory)

Next.js 14 menandai app/ sebagai default. Jika proyek Anda masih memakai pages/, lakukan migrasi berikut:

1. Hapus folder pages yang tidak terpakai.
2. Buat struktur dasar di app/:

   mkdir -p app/(layout)/page.tsx

3. Contoh app/layout.tsx untuk wrapper global:

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

4. Buat halaman beranda di app/page.tsx:

export default function HomePage() {
  return (
    

      
Selamat datang di Next.js 14!
    
  );
}

4. Menggunakan Server Components & Client Components

Next.js 14 memperkenalkan Server Components secara default. Untuk komponen yang membutuhkan interaktivitas, beri label 'use client' pada baris pertama.

// app/components/Counter.tsx (Client Component)
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    
  );
}

Sisipkan ke dalam Server Component tanpa menambah bundle size di server:

export default function Dashboard() {
  return (
    

      
Dashboard Server
       {/* otomatis di‑hydrate di client */}
    
  );
}

5. Konfigurasi Edge Runtime

Edge Runtime memungkinkan fungsi berjalan di CDN‑edge, memberikan latensi ultra‑rendah. Tambahkan file middleware.ts di root:

import { NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

export default function middleware(request) {
  const response = NextResponse.next();
  // Contoh: tambahkan header keamanan
  response.headers.set('X-Frame-Options', 'DENY');
  return response;
}

Untuk API route yang dijalankan di Edge, beri konfigurasi runtime: 'edge' pada file app/api/hello/route.ts:

export const runtime = 'edge';

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

6. Pengaturan ESLint, Prettier, & TypeScript Strict Mode

1. Aktifkan strict di tsconfig.json:

   {
     "compilerOptions": {
       "strict": true,
       "noImplicitAny": true,
       "moduleResolution": "node",
       "target": "es2022",
       "jsx": "preserve",
       "incremental": true
     }
   }

2. Tambahkan .eslintrc.json dengan preset Next.js + Airbnb:

   {
     "extends": ["next/core-web-vitals", "airbnb", "airbnb-typescript", "prettier"],
     "parserOptions": { "project": "./tsconfig.json" }
   }

3. Instalasi dependensi:

   npm i -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import @typescript-eslint/parser @typescript-eslint/eslint-plugin

7. Optimasi Performansi

• Image Optimization: gunakan next/image dengan loader: 'custom' bila memakai CDN selain Vercel.
• Static Site Generation (SSG): beri export const revalidate = 60; pada halaman yang dapat di‑cache tiap menit.
• Incremental Static Regeneration (ISR): contoh pada app/blog/[slug]/page.tsx.

  export const revalidate = 300; // 5 menit
      

• Cache Control Header di middleware.ts untuk asset static.

  response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
      

8. Deployment ke Vercel (Edge)

1. Push repository ke GitHub.

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/username/my-next14-app.git
   git push -u origin main

2. Buka vercel.com, pilih New Project, hubungkan repo, dan pilih Next.js sebagai framework.
3. Pastikan Framework Preset → Next.js dan Edge Functions diaktifkan pada Settings → Functions.
4. Deploy selesai, Vercel otomatis membuat .vercel/output dan menyediakan URL produksi.

9. Best Practice Tambahan

• Environment Variables: simpan di .env.local dan akses via process.env.NEXT_PUBLIC_API_URL. Jangan pernah commit file .env ke repo.
• Security Headers: gunakan next-secure-headers di middleware untuk CSP, HSTS, dan Referrer-Policy.
• Testing: pasang jest dan @testing-library/react untuk unit test komponen.

  npm i -D jest @testing-library/react @testing-library/jest-dom ts-jest

• Monitoring: integrasikan dengan Vercel Analytics atau pilih Sentry (@sentry/nextjs) untuk error tracking.

10. Troubleshooting Umum

Gejala	Penyebab	Solusi
"Error: Cannot find module 'next'"	Node versi tidak kompatibel atau instalasi gagal	Pastikan Node 20.12+, hapus node_modules dan jalankan npm install lagi
SSR tidak merender data	Fetch di client component tanpa 'use client'	Pindahkan fetch ke server component atau gunakan useEffect pada client component
Cache tidak ter‑update setelah deploy	Header Cache-Control terlalu agresif	Kurangi max-age atau gunakan revalidate yang lebih pendek

Next.js 14 menggabungkan kekuatan App Router, Server Components, dan Edge Runtime dalam satu paket yang mudah di‑setup. Dengan mengikuti tutorial ini Anda sudah memiliki proyek TypeScript, Tailwind, dan linting yang siap produksi, serta best practice keamanan dan performa. Deploy ke Vercel dalam hitungan menit, pantau dengan analytics, dan mulailah membangun aplikasi web modern yang skalabel dan ultra‑responsif.

---

Panduan step‑by‑step setup Next.js 14 dengan App Router, Server Components, dan Edge Runtime. Termasuk instalasi, konfigurasi, contoh kode, best practice, dan deployment ke Vercel.

Programming,Software Engineering,Web Development,Next.js,React,Edge Runtime,App Router

#Programming #SoftwareEngineering #WebDev #Tech #Coding