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

Muhammad Akil Mei 16, 2026


Next.js 14 menjadi standar de‑facto untuk React‑based web apps di 2026. Tutorial ini membimbing Anda langkah demi langkah mulai dari instalasi, konfigurasi, hingga implementasi Server Actions dan best practice performance.

1. Prasyarat dan Persiapan Lingkungan

Sebelum memulai, pastikan sistem Anda memenuhi persyaratan berikut:

  • Node.js v20.10+ (LTS)
  • npm v10+ atau Yarn v3+
  • Git untuk version control
  • Editor kode (VS Code direkomendasikan) dengan ekstensi ESLint dan Prettier

Jika belum terpasang, instal Node.js dari nodejs.org dan verifikasi dengan:

node -v
npm -v

2. Membuat Proyek Next.js 14 Baru

Jalankan perintah di bawah ini untuk membuat aplikasi Next.js dengan fitur App Router aktif secara default.

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

Parameter --ts menambahkan TypeScript, sementara --app memastikan struktur baru (app/ folder) dipakai.

2.1. Struktur Direktori Utama

my-next14-app/
├─ app/                # App Router entry point
│  ├─ layout.tsx       # Root layout
│  ├─ page.tsx         # Home page
│  └─ (dashboard)/    # Contoh nested route
├─ public/            # Static assets
├─ styles/            # CSS/SCSS modules
├─ next.config.js    # Konfigurasi Next.js
└─ tsconfig.json     # TypeScript settings

3. Konfigurasi Dasar next.config.js

Tambahkan setting berikut untuk mengaktifkan Server Actions, image optimization, dan experimental edge runtime.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: '**.vercel.app',
    }]
  },
  experimental: {
    serverActions: true,
    appDir: true,
    typedRoutes: true,
    runtime: 'edge' // optional, gunakan edge untuk latency rendah
  }
};

module.exports = nextConfig;

4. Instalasi Dependensi Tambahan

Berikut paket yang umum dipakai dalam proyek modern:

npm i tailwindcss@3.4.0 postcss@8.4.32 autoprefixer@10.4.16
npm i @tanstack/react-query@5.0.0-alpha.9
npm i classnames
npm i -D eslint@8 prettier@3 eslint-config-next@13

Inisialisasi Tailwind CSS:

npx tailwindcss init -p

Sesuaikan tailwind.config.js agar mendeteksi file di folder app:

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

5. Membuat Layout Global dengan Tailwind

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

export const metadata: Metadata = {
  title: 'Next.js 14 Demo',
  description: 'Demo implementasi App Router, Server Actions, dan optimasi performance.'
};

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

6. Implementasi Server Action (CRUD sederhana)

Server Actions memungkinkan Anda menulis fungsi server langsung dalam komponen React tanpa API route terpisah.

6.1. Membuat model data (in‑memory)

// lib/store.ts
export type Todo = { id: string; text: string; completed: boolean };
let todos: Todo[] = [];

export const getTodos = () => Promise.resolve(todos);
export const addTodo = (text: string) => {
  const newTodo: Todo = { id: crypto.randomUUID(), text, completed: false };
  todos.push(newTodo);
  return Promise.resolve(newTodo);
};
export const toggleTodo = (id: string) => {
  todos = todos.map(t => t.id === id ? { ...t, completed: !t.completed } : t);
  return Promise.resolve();
};

6.2. Membuat komponen Todo dengan Server Action

// app/(dashboard)/todos/page.tsx
'use server';
import { addTodo, getTodos, toggleTodo } from '@/lib/store';
import { useState, useEffect } from 'react';

export default function TodoPage() {
  const [list, setList] = useState([] as Todo[]);
  const [input, setInput] = useState('');

  // Fetch awal
  useEffect(() => {
    getTodos().then(setList);
  }, []);

  // Server Action untuk menambah
  async function handleAdd(e: React.FormEvent) {
    e.preventDefault();
    if (!input.trim()) return;
    const newItem = await addTodo(input.trim());
    setList(prev => [...prev, newItem]);
    setInput('');
  }

  // Server Action untuk toggle
  async function handleToggle(id: string) {
    await toggleTodo(id);
    setList(prev => prev.map(t => t.id === id ? { ...t, completed: !t.completed } : t));
  }

  return (
    

      
Todo List (Server Actions)

      

         setInput(e.target.value)}
          placeholder="Tambah todo..."
        />
        
      

      
    
        {list.map(todo => (
          
  • 
            {todo.text}
            
          
    • 
        ))}
      

    

  );
}

7. Optimasi Performance dengan React 19 Concurrent Features

  • Gunakan useTransition untuk defer updates pada UI berat.
  • Manfaatkan Suspense bersama next/dynamic untuk code‑splitting otomatis.
  • Aktifkan next/image untuk lazy‑load gambar.

7.1. Contoh Dynamic Import

// components/HeavyChart.tsx
import { Chart } from 'react-chartjs-2';
export default function HeavyChart() {
  return ;
}

// app/(dashboard)/analytics/page.tsx
import dynamic from 'next/dynamic';
import { Suspense } from 'react';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), { ssr: false, loading: () => 
Loading chart...
 });

export default function AnalyticsPage() {
  return (
    Preparing analytics...
}>
      
    
  );
}

8. Menyiapkan CI/CD dengan GitHub Actions

File .github/workflows/ci.yml berikut melakukan lint, build, dan deploy ke Vercel setiap push ke main.

name: CI & Deploy
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 lint
      - run: npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          github-token: ${{ secrets.GITHUB_TOKEN }}

9. Best Practice yang Harus Diterapkan

  • Type‑Safety: Gunakan TypeScript strict mode ("strict": true di tsconfig.json).
  • Linting & Formatting: Enforce eslint-config-next + prettier dalam pre‑commit hook (husky).
  • Security: Aktifkan CSP header di next.config.js dan hindari meng‑expose env yang sensitif.
  • Cache‑Control: Manfaatkan next/font untuk self‑hosted fonts sehingga browser dapat cache.
  • Monitoring: Integrasikan @sentry/nextjs untuk error tracking produksi.

10. Deploy ke Vercel (One‑Click)

  1. Masuk ke Vercel dashboard dan klik New Project.
  2. Hubungkan repo GitHub yang berisi proyek Anda.
  3. Vercel otomatis mendeteksi Next.js, pilih Next.js 14 sebagai framework.
  4. Set environment variables (mis. NEXT_PUBLIC_API_URL).
  5. Klik Deploy. Setelah selesai, URL produksi akan tersedia.

Jika Anda menggunakan edge runtime, pastikan plan Vercel mendukung Edge Functions.


Next.js 14 menggabungkan kekuatan App Router, Server Actions, dan React 19 concurrent features dalam satu paket yang sangat produktif. Dengan mengikuti tutorial ini, Anda sudah memiliki proyek TypeScript yang teroptimasi, CI/CD otomatis, serta best practice yang siap di‑scale ke produksi. Jangan lupa terus memantau release notes Next.js karena tim Vercel rutin menambahkan fitur seperti streaming UI dan AI‑driven data fetching yang akan semakin mempercepat pengembangan Anda.
Tutorial step‑by‑step Next.js 14 dengan App Router, Server Actions, performance optimization, CI/CD, dan best practice untuk developer 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