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

Muhammad Akil Mei 29, 2026


Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Artikel ini memberikan tutorial step‑by‑step cara menginstal, mengkonfigurasi, menulis kode contoh, serta menerapkan best practice untuk keamanan dan performa pada proyek Next.js 14.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

  • Node.js v20.x (atau lebih baru) – node -v harus menghasilkan versi 20 atau 22.
  • npm atau Yarn (rekomendasi pnpm untuk workspace).
  • Git untuk version control.
  • Akun Vercel (untuk deployment) – opsional tapi sangat direkomendasikan.

1.1 Instalasi Node.js

Gunakan nvm untuk mengelola versi Node:

nvm install 20
nvm use 20

2. Membuat Proyek Next.js 14 Baru

npx create-next-app@latest my-next14-app --ts --experimental-app-router

Perintah di atas menghasilkan struktur folder dengan app/ directory (App Router) dan TypeScript terkonfigurasi.

2.1 Struktur Dasar

  • app/layout.tsx – layout global.
  • app/page.tsx – halaman beranda.
  • app/api/ – folder untuk Server Actions (API Route baru di Next.js 14).

3. Konfigurasi Dasar

3.1 next.config.js

Aktifkan fitur eksperimental dan atur image optimizer:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }]
  },
  experimental: {
    serverActions: true,
    appDir: true
  }
};
export default nextConfig;

3.2 TypeScript strict mode

Pastikan tsconfig.json mengaktifkan strict dan noImplicitAny untuk meningkatkan kualitas kode.

4. Membuat Server Action – API Route Modern

Server Actions menggantikan pages/api tradisional dengan integrasi langsung di dalam folder app. Berikut contoh menambah data ke mock database:

4.1 Buat file app/api/addMessage/route.ts

import { NextResponse } from 'next/server';

type Message = { id: string; text: string; createdAt: string };

let messages: Message[] = [];

export async function POST(request: Request) {
  const { text } = await request.json();
  if (!text) {
    return NextResponse.json({ error: 'Text is required' }, { status: 400 });
  }
  const newMessage: Message = {
    id: crypto.randomUUID(),
    text,
    createdAt: new Date().toISOString()
  };
  messages.push(newMessage);
  return NextResponse.json(newMessage, { status: 201 });
}

export async function GET() {
  return NextResponse.json(messages);
}

Endpoint ini menyediakan POST untuk menambah pesan dan GET untuk mengambil semua pesan.

4.2 Menggunakan Server Action di Frontend

Buat UI sederhana di app/page.tsx:

"use client";
import { useState, useEffect } from 'react';

export default function Home() {
  const [text, setText] = useState('');
  const [messages, setMessages] = useState([]);

  const fetchMessages = async () => {
    const res = await fetch('/api/addMessage');
    const data = await res.json();
    setMessages(data);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await fetch('/api/addMessage', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text })
    });
    setText('');
    fetchMessages();
  };

  useEffect(() => { fetchMessages(); }, []);

  return (
    

      
Next.js 14 Server Actions Demo

      

         setText(e.target.value)}
          placeholder="Tulis pesan..."
          className="flex-1 rounded border p-2"
          required
        />
        
      

      
    
        {messages.map((msg: any) => (
          
  • {msg.text} ({new Date(msg.createdAt).toLocaleTimeString()})
    • 
        ))}
      

    

  );
}

5. Optimasi Performa – Streaming & Incremental Static Regeneration (ISR)

5.1 Streaming dengan React 19 Server Components

Next.js 14 mendukung React Server Components (RSC) yang memungkinkan streaming UI di server.

// app/components/MessageList.tsx (Server Component)
import { Suspense } from 'react';

export default async function MessageList() {
  const res = await fetch('https://api.example.com/messages', { cache: 'no-store' });
  const messages = await res.json();
  return (
    
    
      {messages.map((msg: any) => (
        
  • {msg.text}
    • 
      ))}
    

  );
}

// app/page.tsx (Client Component) – embed dengan Suspense
export default function Home() {
  return (
    

      
Live Messages

      Loading...
}>
        
      
    

  );
}

5.2 ISR pada Halaman Dinamis

Tambahkan revalidate di generateStaticParams atau gunakan fetch dengan opsi next: { revalidate: 60 } untuk memperbarui konten tiap menit.

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const data = await fetch(`https://cms.example.com/posts/${params.slug}`, {
    next: { revalidate: 300 }
  });
  const post = await data.json();
  return (
    

      
{post.title}

      

    

  );
}

6. Keamanan – Best Practice

  • HTTP Headers: Tambahkan helmet atau gunakan next-secure-headers di middleware. 
    // middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  const res = NextResponse.next();
  res.headers.set('X-Content-Type-Options', 'nosniff');
  res.headers.set('X-Frame-Options', 'DENY');
  res.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  return res;
}
  • Rate limiting: Integrasikan upstash/ratelimit untuk API route.
  • Env variables: Simpan rahasia di .env.local dan gunakan process.env.NEXT_PUBLIC_* hanya untuk nilai yang tidak sensitif.

7. CI/CD dengan GitHub Actions & Vercel

7.1 GitHub Actions Workflow

name: Deploy Next.js 14
on:
  push:
    branches: [main]
jobs:
  build:
    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 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: .
          github-token: ${{ secrets.GITHUB_TOKEN }}

Workflow ini otomatis membangun dan mendepoy aplikasi setelah push ke main.

7.2 Konfigurasi Vercel

Di dashboard Vercel, atur Environment Variables yang sama dengan .env.local. Pastikan "Build Command" adalah npm run build dan "Output Directory" adalah .next.

8. Testing – Unit & End‑to‑End

  • Jest + React Testing Library untuk unit component. 
    // __tests__/MessageForm.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import Home from '@/app/page';

test('renders form and submits', async () => {
  render();
  const input = screen.getByPlaceholderText('Tulis pesan...');
  fireEvent.change(input, { target: { value: 'Hello' } });
  fireEvent.click(screen.getByText('Kirim'));
  // mock fetch can be added for full coverage
});
  • Playwright untuk e2e testing pada Vercel preview. 
    // e2e/home.spec.ts
import { test, expect } from '@playwright/test';

test('user can add a message', async ({ page }) => {
  await page.goto('/');
  await page.fill('input[placeholder="Tulis pesan..."]', 'Testing Next.js');
  await page.click('text=Kirim');
  await expect(page.locator('li')).toContainText('Testing Next.js');
});

9. Deploy ke Production & Monitoring

  • Gunakan Vercel atau Cloudflare Pages – keduanya otomatis meng‑enable edge functions untuk latency rendah.
  • Integrasikan next-axiom atau Sentry untuk logging dan error tracking.

10. Ringkasan Langkah

  1. Instal Node.js v20+, buat proyek dengan create-next-app (App Router)
  2. Konfigurasi next.config.js untuk Server Actions.
  3. Buat API route modern di app/api dan konsumsi di client component.
  4. Optimasi dengan streaming, ISR, dan image optimizer.
  5. Tambahkan security headers, rate limiting, dan environment variables.
  6. Setup CI/CD menggunakan GitHub Actions & Vercel.
  7. Implementasikan unit & e2e testing.
  8. Deploy, monitor, dan iterasi.

Dengan mengikuti tutorial ini, Anda akan memiliki aplikasi Next.js 14 yang production‑ready, aman, dan teroptimasi untuk beban traffic modern.


Next.js 14 menyatukan kekuatan React Server Components, App Router, dan Server Actions dalam satu kerangka kerja yang mudah di‑deploy. Dengan mengikuti langkah‑langkah di atas—mulai dari instalasi, konfigurasi, penulisan kode hingga CI/CD dan monitoring—Anda dapat membangun aplikasi web modern yang cepat, aman, dan skalabel. Terapkan best practice yang disebutkan dan pantau performa secara berkala untuk memastikan kualitas kode tetap tinggi dalam jangka panjang.
Tutorial lengkap setup Next.js 14 dengan App Router, Server Actions, streaming, ISR, serta CI/CD di Vercel. Panduan step-by-step untuk Programming, Software Engineering, dan Web Development.

Programming,Software Engineering,Web Development,Next.js 14,React,Server Actions,App Router,CI/CD,Vercel

#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