Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Optimasi Performance

Muhammad Akil Mei 11, 2026


Next.js 14 terus menjadi pilihan utama untuk pengembangan web modern. Tutorial ini memberikan langkah‑step demi langkah mulai dari instalasi, konfigurasi, contoh kode, hingga best practice untuk memastikan proyek Anda cepat, aman, dan scalable.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi 20.10+ (LTS) dan npm atau pnpm terbaru. Anda dapat memeriksa versi dengan:

node -v
npm -v   # atau pnpm -v

Jika belum terpasang, unduh dari nodejs.org atau gunakan nvm untuk mengelola versi.

2. Membuat Proyek Next.js 14

Gunakan create-next-app dengan flag --experimental-app untuk mengaktifkan App Router secara otomatis:

npx create-next-app@latest my-next14-app --experimental-app
cd my-next14-app

Jika Anda lebih suka pnpm:

pnpm create next-app my-next14-app --experimental-app

Struktur folder utama akan terlihat seperti:

app/
  ├─ layout.tsx
  ├─ page.tsx
  └─ (routes)/
public/
styles/
next.config.mjs
package.json

3. Instalasi Dependensi Tambahan

Untuk meningkatkan developer experience, instal beberapa paket yang umum dipakai:

npm install tailwindcss@latest postcss@latest autoprefixer@latest
npm install @tanstack/react-query @auth0/nextjs-auth0
# atau gunakan pnpm add ...

Jalankan inisialisasi Tailwind CSS:

npx tailwindcss init -p

Konfigurasikan tailwind.config.js untuk mendukung mode JIT dan direktori app:

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

4. Konfigurasi Next.js 14 (next.config.mjs)

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,               // aktifkan App Router
    serverActions: true,        // enable Server Actions (Beta but stable in 14)
    typedRoutes: true,          // optional, improves TypeScript autocompletion
  },
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: '**',
    }],
  },
  i18n: {
    locales: ['en', 'id'],
    defaultLocale: 'en',
  },
};
export default nextConfig;

Catatan: Pastikan experimental.serverActions di‑enable hanya di lingkungan development atau setelah Anda memverifikasi kompatibilitas dengan middleware yang ada.

5. Membuat Layout Dasar dengan Tailwind

// app/layout.tsx
import './globals.css';

export const metadata = {
  title: 'Next.js 14 Starter',
  description: 'Demo App Router & Server Actions',
};

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

6. Implementasi Server Action (CRUD sederhana)

Server Actions memungkinkan Anda mengeksekusi kode server langsung dari komponen React tanpa menulis API route terpisah.

// app/(routes)/todos/page.tsx
"use server";
import { revalidatePath } from 'next/cache';
import { prisma } from '@/lib/prisma'; // contoh ORM Prisma

export async function addTodo(actionData: FormData) {
  const title = actionData.get('title') as string;
  await prisma.todo.create({ data: { title } });
  revalidatePath('/todos'); // refresh UI
}

export default async function TodosPage() {
  const todos = await prisma.todo.findMany();
  return (
    

      
Todo List

      

        
        
      

      
    
        {todos.map(t => (
          
  • {t.title}
    • 
        ))}
      

    

  );
}

Penjelasan singkat:

  • "use server" menandai file sebagai server‑only.
  • Fungsi addTodo menerima FormData, menulis ke database, lalu memanggil revalidatePath agar cache halaman ter‑refresh.
  • Komponen React tetap bersih, tidak perlu fetch manual.

7. Mengatur Prisma + PostgreSQL di Docker

# docker-compose.yml
version: '3.9'
services:
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: nextuser
      POSTGRES_PASSWORD: secretpwd
      POSTGRES_DB: nextdb
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data

  app:
    build: .
    command: npm run dev
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"
    env_file:
      - .env.local
    depends_on:
      - db

volumes:
  pgdata:

Tambahkan .env.local:

DATABASE_URL=postgresql://nextuser:secretpwd@db:5432/nextdb?schema=public

Jalankan:

docker compose up -d   # start DB & app
npx prisma init        # generate prisma folder
npx prisma migrate dev --name init

8. Integrasi Auth0 (Next.js Auth) dengan Server Actions

// pages/api/auth/[...auth0].js (legacy API route) – tetap diperlukan untuk callback
import { handleAuth } from '@auth0/nextjs-auth0';
export default handleAuth();

Di app/layout.tsx tambahkan provider:

import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function RootLayout({ children }) {
  return (
    
      
        {children}
      
    
  );
}

Gunakan hook useUser di komponen UI untuk menampilkan nama pengguna.

9. Optimasi Performance

  • Image Optimization: Gunakan next/image dengan loader: 'custom' bila memakai CDN eksternal.
  • Static Incremental Regeneration (ISR): Tambahkan revalidate pada page export. 
    export const revalidate = 60; // halaman di‑revalidate tiap menit
  • React Server Components (RSC): Biarkan logika data fetching berada di server, hanya kirim UI ke client.
  • Bundle Analyzer: Pasang next-bundle-analyzer untuk memantau ukuran chunk. 
    npm i @next/bundle-analyzer
// next.config.mjs
import withBundleAnalyzer from '@next/bundle-analyzer';
export default withBundleAnalyzer({
  images: { unoptimized: true },
  // other config
});

10. CI/CD dengan GitHub Actions & Vercel

File .github/workflows/ci.yml contoh:

name: CI
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm run test --if-present
      - name: Build
        run: npm run build

Untuk produksi, hubungkan repo ke Vercel (platform resmi Next.js). Vercel otomatis mendeteksi app/ directory dan meng‑deploy dengan preview URLs per PR.

11. Best Practice yang Harus Diikuti

  1. TypeScript Strict Mode: Aktifkan strict: true di tsconfig.json untuk menghindari bug runtime.
  2. Environment Separation: Simpan rahasia di .env.production dan gunakan Vercel/Netlify secret manager.
  3. Folder Conventions: Simpan komponen UI di components/, hooks di hooks/, utilities di lib/.
  4. Testing: Gunakan jest + @testing-library/react untuk unit test, dan playwright untuk e2e.
  5. Code Splitting: Manfaatkan dynamic import dengan next/dynamic untuk heavy libraries (misalnya charting).

12. Deploy ke Production

Setelah push ke main, Vercel akan melakukan build otomatis. Pastikan variabel lingkungan telah ter‑set pada dashboard Vercel, termasuk DATABASE_URL yang mengarah ke instance cloud (Neon, Supabase, atau AWS RDS).

Jika menggunakan Docker di VPS, jalankan:

docker compose -f docker-compose.prod.yml up -d --build

Pastikan docker-compose.prod.yml menon‑aktifkan hot‑reload dan men‑expose hanya port 80/443 via reverse proxy (Caddy atau Nginx).

13. Monitoring & Logging

Integrasikan dengan Vercel Analytics atau gunakan logflare untuk log serverless. Tambahkan middleware untuk menangkap request ID dan latency:

// middleware.ts
import { NextResponse } from 'next/server';
export function middleware(request) {
  const start = Date.now();
  const response = NextResponse.next();
  response.headers.set('X-Request-ID', crypto.randomUUID());
  response.headers.set('X-Response-Time', `${Date.now() - start}ms`);
  return response;
}

14. Debugging Server Actions

Server Actions dijalankan di serverless environment. Untuk melihat error, periksa log Vercel atau jalankan app secara lokal dengan npm run dev. Anda juga dapat menambahkan try/catch dan meng‑return pesan error ke UI:

export async function addTodo(actionData: FormData) {
  try {
    const title = actionData.get('title') as string;
    await prisma.todo.create({ data: { title } });
    revalidatePath('/todos');
  } catch (e) {
    console.error(e);
    // optional: throw new Error('Failed to add todo');
  }
}

15. Studi Kasus: Migrasi dari Next.js 13 (pages) ke Next.js 14 (app)

Tim sebuah fintech startup berhasil memindahkan 30+ halaman dalam 2 minggu dengan pendekatan berikut:

  • Mengonversi pages/ menjadi app/(routes)/ satu per satu.
  • Memanfaatkan Server Actions untuk menggantikan API routes internal.
  • Menambahkan metadata di tiap folder untuk SEO otomatis.
  • Melakukan load‑testing dengan k6 – performa turun 22% karena streaming rendering.

Hasil akhir: Time‑to‑First‑Byte (TTFB) berkurang dari 420 ms menjadi 310 ms, Core Web Vitals semua di atas 0.9, dan tim developer melaporkan pengurangan boilerplate sebanyak 40%.


Dengan mengikuti tutorial ini, Anda dapat membangun aplikasi Next.js 14 yang modern, teroptimasi, dan siap produksi. Mulai dari setup lingkungan, penerapan Server Actions, integrasi database serta otentikasi, hingga CI/CD dan monitoring, setiap langkah dirancang untuk menjaga kode bersih, performa tinggi, dan skalabilitas jangka panjang. Selamat mencoba dan terus eksplorasi fitur-fitur baru yang terus berkembang di ekosistem Next.js!
Tutorial step-by-step setup Next.js 14 dengan App Router, Server Actions, Tailwind, Prisma, Auth0, Docker, CI/CD, dan best practice performance optimization untuk web development modern.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

Let's collaborate, innovate, and build the future of technology together!

Posting Komentar

0 Komentar