Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Optimasi Kinerja di 2026

Muhammad Akil Juni 03, 2026


Next.js 14 menjadi standar de‑facto untuk pengembangan aplikasi React full‑stack. Tutorial ini menuntun Anda dari instalasi hingga deployment dengan best practice terkini, termasuk penggunaan Server Actions, Edge Runtime, dan integrasi CI/CD.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

  • Node.js >= 20.10 (LTS terbaru pada 2026)
  • npm atau yarn (versi 2+)
  • Git
  • Docker (opsional untuk containerization)

Verifikasi instalasi dengan node -v dan npm -v.

2. Membuat Project Next.js 14

npx create-next-app@latest my-next14-app --typescript --eslint --src-dir --app-dir

Parameter yang dipakai:

  • --typescript: menyiapkan TypeScript secara default.
  • --eslint: menambahkan konfigurasi linting.
  • --src-dir & --app-dir: struktur proyek modern dengan folder src/app untuk App Router.

Masuk ke direktori project:

cd my-next14-app

3. Menjalankan Development Server

npm run dev

Server tersedia di http://localhost:3000. Pastikan tidak ada error di console.

4. Struktur Dasar App Router

Folder src/app menggantikan pages. Contoh struktur:

src/
├─ app/
│  ├─ layout.tsx          # Layout global
│  ├─ page.tsx            # Home page
│  ├─ (dashboard)/
│  │   ├─ layout.tsx
│  │   └─ page.tsx
│  └─ api/
│      └─ hello/route.ts # API route baru
└─ components/

Setiap folder dengan page.tsx menjadi route otomatis.

5. Mengkonfigurasi Server Actions (Next.js 14)

Server Actions memungkinkan fungsi server dipanggil langsung dari komponen client tanpa menulis API terpisah.

// src/app/(dashboard)/actions.ts
'use server';
import { prisma } from '@/lib/prisma';

export async function addTodo(title: string) {
  'use server';
  return await prisma.todo.create({ data: { title } });
}

Gunakan di komponen client:

// src/app/(dashboard)/page.tsx
'use client';
import { useState, FormEvent } from 'react';
import { addTodo } from './actions';

export default function Dashboard() {
  const [title, setTitle] = useState('');
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    await addTodo(title);
    setTitle('');
  };
  return (
    

       setTitle(e.target.value)} placeholder="Todo title" />
      
    

  );
}

Catatan:

  • Server Actions secara otomatis dijalankan di Edge Runtime jika file next.config.js mengaktifkannya.
  • Hindari mengakses window atau API browser di dalam fungsi 'use server'.

6. Mengaktifkan Edge Runtime

Tambahkan konfigurasi berikut untuk menjalankan semua route di Edge, mengurangi latency global.

// next.config.js
module.exports = {
  experimental: {
    appDir: true,
    serverActions: true,
  },
  runtime: 'edge',
};

Jika hanya beberapa route yang ingin dipindah ke Edge, gunakan export const runtime = 'edge'; di file route.

7. Optimasi Gambar dengan Next/Image (v14)

Next.js 14 memperkenalkan next/image yang mendukung modern formats (AVIF, WebP) secara default.

import Image from 'next/image';

export default function Hero() {
  return (
    Hero banner
  );
}

Gunakan next/image di semua halaman hero atau galeri untuk memanfaatkan lazy‑load dan responsive sizing.

8. Menambah TypeScript Strict Mode

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "paths": { "@/*": ["src/*"] }
  }
}

Strict mode membantu menangkap bug lebih awal, terutama saat mengintegrasikan Server Actions yang mengembalikan tipe data kompleks.

9. Integrasi Prisma 5 dengan PostgreSQL (Cloud)

Instalasi:

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

Modifikasi .env dengan URL database Cloud (contoh: Neon, Supabase, atau Aurora Serverless).

DATABASE_URL="postgresql://user:password@db-host:5432/mydb?sslmode=require"

Schema contoh:

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  completed Boolean  @default(false)
  createdAt DateTime @default(now())
}

Jalankan migrasi:

npx prisma migrate dev --name init

Gunakan di Server Actions seperti pada langkah 5.

10. CI/CD dengan GitHub Actions + Vercel

Buat file .github/workflows/ci.yml:

name: CI
on: [push, pull_request]
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'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build
      - name: Deploy to Vercel
        uses: vercel/action@v2
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          github-comment: false

Vercel otomatis mendeteksi next.config.js dan melakukan build di Edge.

11. Best Practice untuk Produksi

  • Static Site Generation (SSG) untuk halaman yang tidak membutuhkan data real‑time. Gunakan export const revalidate = 86400; untuk ISR (Incremental Static Regeneration) tiap 24 jam.
  • Security Headers: tambahkan next-secure-headers atau konfigurasi manual di next.config.js untuk CSP, X‑Frame‑Options, dan HSTS.
  • Cache Control: pada API route, set Cache-Control: s‑maxage=60, stale‑while-revalidate=30 untuk CDN edge caching.
  • Monitoring: integrasikan dengan Vercel Analytics atau gunakan next-sentry untuk error tracking.
  • Code Splitting: manfaatkan dynamic import dengan next/dynamic untuk komponen berat.

12. Deployment ke Vercel (atau alternatif Cloudflare + Docker)

Jika menggunakan Vercel:

  1. Push repository ke GitHub.
  2. Buat proyek baru di Vercel, hubungkan repo, pilih framework Next.js.
  3. Tambahkan environment variable DATABASE_URL di dashboard Vercel.
  4. Deploy selesai, Vercel otomatis menyediakan preview URL untuk setiap PR.

Jika ingin self‑hosted dengan Docker:

# 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 package*.json ./
RUN npm ci --only=production
EXPOSE 3000
CMD ["npm", "start"]

Build dan jalankan:

docker build -t my-next14-app .
 docker run -p 3000:3000 -e DATABASE_URL=$DATABASE_URL my-next14-app

13. Debugging & Testing

  • VS Code Debugger: tambahkan konfigurasi .vscode/launch.json dengan type": "node", "request": "launch", "runtimeArgs": ["node_modules/.bin/next", "dev"].
  • Testing: gunakan jest + @testing-library/react untuk unit, dan playwright untuk end‑to‑end.
  • React Profiler: aktifkan next dev --experimental-react-profiler untuk menginspeksi rendering.

14. Studi Kasus: Dashboard Analitik Real‑Time

Implementasi di atas dapat langsung dipakai untuk membuat dashboard yang menampilkan data analytics dari PostgreSQL menggunakan Server Actions. Karena fungsi dijalankan di Edge, latency < 30 ms secara global, memberikan UI responsif bahkan pada pengguna di Asia‑Pacific.

Langkah utama:

  1. Desain skema Report di Prisma.
  2. Buat Server Action fetchReport() dengan parameter rentang tanggal.
  3. Gunakan use hook di komponen client untuk streaming data via Response.json() yang di‑cache di CDN.

Hasilnya: Dashboard yang otomatis melakukan ISR tiap 5 menit, menampilkan grafik Chart.js tanpa menulis API terpisah.

15. Ringkasan Langkah

  1. Install Node 20 LTS dan buat project Next.js 14 dengan TypeScript.
  2. Pelajari struktur App Router dan buat layout global.
  3. Implementasikan Server Actions untuk operasi CRUD.
  4. Aktifkan Edge Runtime di next.config.js.
  5. Konfigurasi Prisma 5 dengan PostgreSQL Cloud.
  6. Tambahkan linting, testing, dan CI/CD GitHub Actions.
  7. Deploy ke Vercel atau Docker‑based server.
  8. Ikuti best practice keamanan, caching, dan monitoring.

Dengan mengikuti tutorial ini, Anda siap membangun aplikasi React full‑stack modern yang cepat, scalable, dan siap produksi pada ekosistem 2026.


Next.js 14 menyatukan kekuatan React, Server Actions, dan Edge Runtime dalam satu paket yang mudah di‑deploy. Dengan kombinasi Prisma, CI/CD terotomatisasi, dan best practice keamanan, Anda dapat menghasilkan aplikasi web yang siap bersaing di pasar 2026. Ikuti step‑by‑step di atas, adaptasikan pada proyek Anda, dan nikmati kecepatan serta produktivitas yang ditawarkan oleh stack modern ini.
Tutorial lengkap Next.js 14 2026: instalasi, App Router, Server Actions, Edge Runtime, Prisma, CI/CD, dan best practice untuk performance dan security.

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