Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Optimasi Produksi pada Juni 2026

Muhammad Akil Juni 21, 2026


Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini menguraikan langkah‑langkah instalasi, konfigurasi, contoh kode, serta best practice untuk membangun aplikasi produksi yang cepat, aman, dan siap di‑deploy ke Vercel atau platform Docker‑Kubernetes.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki versi berikut sebelum memulai:

  • Node.js v20.12 atau lebih baru (direkomendasikan LTS)
  • npm v10 atau Yarn v4 (pnpm juga didukung)
  • Git untuk kontrol versi
  • Docker Desktop (opsional, untuk containerization)

Periksa versi dengan node -v dan npm -v. Jika belum terinstal, unduh dari nodejs.org.

2. Membuat Proyek Next.js 14 Baru

npx create-next-app@latest my-next14-app \
  --ts \
  --eslint \
  --app
cd my-next14-app

Flag --app mengaktifkan App Router (direktori app/) yang menjadi inti Next.js 14. Pilihan --ts menyiapkan TypeScript secara otomatis.

3. Struktur Direktori Utama

my-next14-app/
├─ app/                # App Router (pages digantikan)
│  ├─ layout.tsx      # Root layout
│  ├─ page.tsx        # Home page
│  └─ api/            # Server Actions & API routes
├─ public/            # Static assets
├─ src/               # Optional, untuk kode bisnis
├─ next.config.mjs    # Konfigurasi Next.js
├─ tsconfig.json
└─ package.json

Dengan App Router, setiap folder di app/ mewakili rute. Contoh: app/dashboard/page.tsx menjadi /dashboard.

4. Konfigurasi next.config.mjs untuk Produksi

import { withAxiom } from 'next-axiom';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    serverActions: true, // Aktifkan Server Actions (baru di v14)
    appDir: true,
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }],
  },
  async redirects() {
    return [
      { source: '/old-blog/:slug*', destination: '/blog/:slug*', permanent: true },
    ];
  },
  // Optimasi bundling otomatis, tidak perlu terserah
};

export default withAxiom(nextConfig);

Konfigurasi di atas menambahkan dukungan Axiom untuk logging terpusat, mengaktifkan Server Actions, serta menyiapkan remote image loader.

5. Membuat Layout Global dengan Tailwind CSS

Instal Tailwind dan PostCSS:

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Edit tailwind.config.js:

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

Tambahkan ke app/globals.css:

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

Lalu buat app/layout.tsx:

import './globals.css';
import type { Metadata } from 'next';

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

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

          
My Next.js 14 App

        

        
{children}

      
    
  );
}

6. Implementasi Server Action – Formulir Todo

Server Actions memungkinkan penanganan form tanpa API tambahan. Buat folder app/todo dan file page.tsx:

"use server";
import { revalidatePath } from 'next/cache';
import { useState, useActionState } from 'react';

let todos: string[] = [];

async function addTodo(prevState: any, formData: FormData) {
  const task = formData.get('task')?.toString().trim();
  if (!task) return { error: 'Task cannot be empty' };
  todos.push(task);
  // Revalidate cache for /todo route
  revalidatePath('/todo');
  return { success: true };
}

export default function TodoPage() {
  const [state, formAction] = useActionState(addTodo, {});
  const [localTodos, setLocalTodos] = useState(todos);

  // Sync UI after server action
  if (state.success) setLocalTodos([...todos]);

  return (
    

      
Todo List

      

        
        
      

      {state.error && 
{state.error}
}
      
    
        {localTodos.map((t, i) => (
          
  • {t}
    • 
        ))}
      

    

  );
}

Catatan: "use server" menandakan fungsi dijalankan di server. revalidatePath memicu ISR (Incremental Static Regeneration) sehingga UI selalu up‑to‑date tanpa reload penuh.

7. Menambahkan API Route dengan Edge Runtime

Jika diperlukan endpoint yang ultra‑fast, gunakan Edge Runtime:

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export const runtime = 'edge';

export async function GET(request: Request) {
  return NextResponse.json({ greeting: 'Hello from Edge!' });
}

Endpoint ini dapat dipanggil dengan fetch('/api/hello') dan akan dijalankan pada Vercel Edge Network atau Cloudflare Workers.

8. Optimasi Gambar dengan Next/Image & Remote Patterns

import Image from 'next/image';

export default function Hero() {
  return (
    

      Coding landscape
      

        
Welcome to Next.js 14

      

    

  );
}

Dengan remotePatterns pada next.config.mjs, gambar eksternal di‑optimalkan otomatis oleh Next Image.

9. Menyiapkan CI/CD dengan GitHub Actions

# .github/workflows/ci.yml
name: CI & Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'
          working-directory: .

Pipeline ini lint, test, build, dan deploy otomatis ke Vercel setiap push ke main. Pastikan token VERCEL disimpan di GitHub Secrets.

10. Containerisasi dengan Docker (Opsional untuk K8s)

# Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
RUN npm ci --production
EXPOSE 3000
CMD ["npm", "run", "start"]

Build dan jalankan:

docker build -t my-next14-app .
docker run -p 3000:3000 my-next14-app

Image ini siap dipush ke Docker Hub atau Azure Container Registry, lalu di‑deploy ke Kubernetes menggunakan Helm chart standar.

11. Security Best Practices

  • Aktifkan Content‑Security‑Policy lewat next‑secure‑headers untuk melindungi XSS.
  • Gunakan dotenv dan Vercel Environment Variables untuk rahasia (API keys, DB connection).
  • Pastikan semua endpoint yang menulis data memakai POST atau Server Actions dengan CSRF token otomatis.
  • Audit dependencies secara reguler dengan npm audit atau GitHub Dependabot.

12. Monitoring dan Logging

Integrasikan Axiom (atau Logtail) untuk log terpusat:

npm i @axiomcorp/next
// sudah dipanggil di next.config.mjs dengan withAxiom

Gunakan import { logger } from '@axiomcorp/next'; di Server Actions atau API routes untuk mencatat error atau performance metrics.

13. Deploy ke Production

Anda memiliki dua pilihan utama:

  • Vercel – otomatis meng‑optimalkan static & serverless, cukup git push ke repo yang terhubung.
  • Kubernetes – gunakan Helm chart helm repo add nextjs https://nextjs.org/helm, kemudian helm install my-app nextjs/nextjs dengan image Docker yang sudah dibuat.

Kedua metode mendukung Edge Runtime dan ISR secara native.

14. Testing End‑to‑End dengan Playwright

npm i -D @playwright/test
npx playwright install

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('homepage loads and shows hero', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('text=Welcome to Next.js 14')).toBeVisible();
});

Jalankan npm test:e2e (script dapat ditambahkan di package.json).

15. Ringkasan Step‑by‑Step

  1. Instal Node.js 20+ dan npm.
  2. Gunakan create-next-app@latest --app --ts untuk membuat project.
  3. Konfigurasikan next.config.mjs (Server Actions, image remote, redirects).
  4. Tambahkan Tailwind CSS untuk styling cepat.
  5. Buat layout global di app/layout.tsx.
  6. Implementasikan Server Action (Todo) untuk demonstrasi full‑stack.
  7. Tambahkan Edge API route bila perlu.
  8. Optimalkan gambar dengan Next/Image.
  9. Set up CI/CD dengan GitHub Actions & Vercel.
  10. (Opsional) Containerize dengan Docker untuk K8s.
  11. Ikuti security checklist.
  12. Integrasikan logging (Axiom) & monitoring.
  13. Deploy ke Vercel atau Kubernetes.
  14. Uji dengan Playwright.

Dengan mengikuti panduan ini, Anda akan memiliki aplikasi Next.js 14 yang scalable, secure, dan siap melayani ribuan pengguna sekaligus memanfaatkan fitur-fitur terbaru seperti Server Actions dan Edge Runtime.


Next.js 14 telah memimpin evolusi pengembangan React dengan App Router, Server Actions, dan dukungan penuh untuk Edge Computing. Tutorial ini memberi Anda fondasi kuat—dari instalasi hingga deployment, termasuk Docker, CI/CD, dan best practice keamanan. Terapkan langkah‑langkah di atas, sesuaikan dengan kebutuhan bisnis, dan nikmati performa serta developer experience yang tak tertandingi dalam dunia Web Development modern.
Panduan lengkap instalasi, konfigurasi, contoh kode, dan best practice Next.js 14 dengan App Router, Server Actions, Docker, dan CI/CD pada Juni 2026.

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