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

Next.js 14 membawa inovasi besar seperti App Router generasi baru, Server Actions, dan integrasi Edge Runtime. Tutorial ini memberikan langkah‑demi‑langkah instalasi, konfigurasi, contoh kode, serta best practice untuk membangun aplikasi React modern yang siap produksi pada Juni 2026.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

• Node.js v20.10+ atau lebih baru (LTS).
• npm 10.x atau yarn 1.22+.
• Git untuk version control.
• Akun Vercel (opsional untuk deployment).

Instalasi Node.js

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v   # harus menunjukkan v20.x
npm -v    # harus menunjukkan 10.x

2. Membuat Proyek Next.js 14

Gunakan create-next-app dengan flag --experimental-app untuk mengaktifkan App Router secara default.

npx create-next-app@latest my-next14-app --experimental-app --ts
cd my-next14-app
npm install

Struktur folder utama akan terlihat seperti:

my-next14-app/
├─ app/               # App Router root
│   ├─ page.tsx
│   └─ layout.tsx
├─ public/
├─ styles/
├─ next.config.mjs
└─ package.json

3. Konfigurasi Dasar next.config.mjs

Aktifkan fitur experimental, Edge Runtime, dan Image Optimization.

export default defineConfig({
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
    serverActions: true,
    typedRoutes: true
  },
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'images.unsplash.com' }]
  }
});

4. Membuat Layout Global dengan Server Components

File app/layout.tsx bertindak sebagai root layout. Gunakan Header dan Footer sebagai Server Components untuk optimalisasi.

import './globals.css';

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

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

        {children}
        

      
    
  );
}

async function Header() {
  return (
    

      
Next.js 14 Playground
    
  );
}

function Footer() {
  return (
    

      © {new Date().getFullYear()} Next.js 14 Demo
    
  );
}

5. Implementasi Server Action untuk Formulir Todo

Server Actions memungkinkan Anda menulis fungsi async yang dijalankan di server tanpa endpoint API terpisah.

5.1 Membuat File app/todo/page.tsx

"use server";
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

let todos: string[] = [];

export async function addTodoAction(data: FormData) {
  const task = data.get('task')?.toString().trim();
  if (task) {
    todos.push(task);
    // Revalidasi halaman agar UI ter-update
    revalidatePath('/todo');
  }
}

export default async function TodoPage() {
  return (
    

      
Todo List (Server Actions)
      

        
        
      
      

        {todos.map((t, i) => (
          
{t}
        ))}
      
    
  );
}

Catatan: Karena todos berada di memori server, ini cocok untuk demo atau prototipe. Untuk produksi gunakan database (PostgreSQL, PlanetScale, dll).

6. Menambahkan Database dengan Prisma dan PlanetScale

6.1 Instalasi Prisma

npm install prisma @prisma/client
npx prisma init --datasource-provider mysql

Ubah .env dengan URL PlanetScale Anda:

DATABASE_URL="mysql://username:password@aws.connect.psdb.cloud/database?sslaccept=strict"

6.2 Definisikan Skema

model Todo {
  id        Int      @id @default(autoincrement())
  task      String
  createdAt DateTime @default(now())
}

npx prisma migrate dev --name init

6.3 Server Action yang Terhubung ke DB

"use server";
import { PrismaClient } from '@prisma/client';
import { revalidatePath } from 'next/cache';

const prisma = new PrismaClient();

export async function addTodoAction(data: FormData) {
  const task = data.get('task')?.toString().trim();
  if (!task) return;
  await prisma.todo.create({ data: { task } });
  revalidatePath('/todo');
}

export async function getTodos() {
  return await prisma.todo.findMany({ orderBy: { createdAt: 'desc' } });
}

export default async function TodoPage() {
  const todos = await getTodos();
  return (
    

      
Todo List (Prisma + Server Actions)
      

        
        
      
      

        {todos.map(t => (
          
{t.task}
        ))}
      
    
  );
}

7. Optimasi Performa untuk Produksi

• Image Optimization: Gunakan next/image dengan remotePatterns di next.config.mjs.
• Middleware Caching: Implementasikan export const config = { matcher: '/(.*)' }; di middleware.ts untuk cache edge.
• Static Rendering: Halaman yang tidak membutuhkan data dinamis dapat di‑export sebagai static dengan export const runtime = 'edge';.
• Incremental Static Regeneration (ISR): Tambahkan revalidate: 60 pada fetch atau generateStaticParams bila diperlukan.

Contoh Middleware Cache

import { NextResponse } from 'next/server';
export const config = { matcher: '/((?!api|_next).*)' };

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('Cache-Control', 'public, max-age=60, stale-while-revalidate=30');
  return response;
}

8. CI/CD dengan GitHub Actions & Vercel

File .github/workflows/deploy.yml secara otomatis membangun dan mendepoy ke Vercel setiap push ke main.

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 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: .
          prod: true

9. Testing dan Linting

• Jest + React Testing Library untuk unit test.

  npm install --save-dev jest @testing-library/react @testing-library/jest-dom ts-jest

• ESLint + Prettier dengan konfigurasi next/core-web-vitals.

  npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react-hooks

10. Deploy ke Vercel (atau alternatif)

1. Push repository ke GitHub.
2. Buka dashboard Vercel → New Project → Import repository.
3. Pastikan Framework Preset terdeteksi sebagai Next.js.
4. Set environment variable DATABASE_URL dengan nilai yang sama di .env.
5. Deploy selesai, Vercel otomatis menyediakan CDN Edge, image optimization, dan analytics.

11. Best Practice Penutup

• Gunakan TypeScript di seluruh proyek untuk type‑safety.
• Jangan menyimpan secret di client; manfaatkan process.env di server actions.
• Selalu jalankan npm audit dan perbarui dependencies secara berkala (npm run upgrade).
• Monitor performa dengan Vercel Analytics atau Web Vitals API.
• Document setiap API endpoint (walaupun App Router minimalkan) dengan Swagger atau OpenAPI jika diperlukan.

Dengan mengikuti langkah‑demi‑langkah di atas, Anda kini memiliki aplikasi Next.js 14 yang memanfaatkan App Router, Server Actions, Prisma‑PlanetScale, serta pipeline CI/CD otomatis. Kombinasi ini memberikan pengalaman developer yang cepat, performa produksi yang optimal, dan skalabilitas yang siap menampung beban tinggi. Selamat bereksperimen dan terus ikuti update resmi Next.js untuk fitur‑fitur terbaru!

---

Panduan step-by-step setup Next.js 14 dengan App Router, Server Actions, Prisma, dan CI/CD. Tutorial lengkap untuk Programming, Software Engineering, dan Web Development pada 2026.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding