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

Muhammad Akil Juni 20, 2026


Next.js 14 terus menjadi pilihan utama untuk membangun aplikasi React modern dengan performa tinggi. Tutorial ini memandu Anda step‑by‑step menginstal, mengonfigurasi, serta menulis kode contoh menggunakan App Router, Server Actions, dan TypeScript, lengkap dengan best practice untuk produksi.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki alat berikut terinstal pada mesin development:

  • Node.js >= 20.10 (LTS)
  • npm atau Yarn (versi 2+)
  • Git
  • Editor kode modern (VS Code direkomendasikan)

Verifikasi instalasi dengan perintah node -v dan npm -v.

2. Membuat Project Next.js 14 Baru

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

Flags yang dipakai:

  • --ts – menyiapkan TypeScript.
  • --eslint – menambahkan konfigurasi linting standar.
  • --experimental-app-dir – mengaktifkan App Router (fitur stabil di v14).

Setelah selesai, jalankan npm run dev dan buka http://localhost:3000 untuk memastikan semuanya berfungsi.

3. Struktur Direktori App Router

Next.js 14 menggantikan pages dengan app directory. Contoh struktur minimal:

my-next14-app/
├─ app/
│  ├─ layout.tsx          # Root layout
│  ├─ page.tsx            # Home page
│  ├─ dashboard/
│  │   ├─ layout.tsx
│  │   └─ page.tsx
│  └─ api/
│      └─ hello/route.ts # Server Action example
├─ public/
├─ styles/
└─ tsconfig.json

4. Membuat Layout Global dengan layout.tsx

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

export const metadata: Metadata = {
  title: 'Next.js 14 Demo',
  description: 'Tutorial setup Next.js 14 dengan App Router dan Server Actions',
};

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

          
Next.js 14 Demo

        

        
{children}

        

          © {new Date().getFullYear()} MyCompany
        

      
    
  );
}

Best practice: gunakan className utility-first (Tailwind) atau CSS Modules untuk menjaga keterpisahan style.

5. Membuat Halaman Dashboard dengan Data Server‑Side

Kita akan menampilkan data mock yang di‑fetch pada server menggunakan fetch dengan cache: 'no-store' agar selalu fresh.

// app/dashboard/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Dashboard',
};

async function getStats() {
  const res = await fetch('https://api.publicapis.org/entries', {
    next: { revalidate: 0 }, // disable ISR for demo
  });
  const data = await res.json();
  return data.count;
}

export default async function DashboardPage() {
  const count = await getStats();
  return (
    

      
API Entries Count

      
Total public APIs available: {count}

    

  );
}

Catatan: fungsi async di dalam komponen page adalah fitur Server Component default di Next.js 14.

6. Memanfaatkan Server Actions (Beta di v14)

Server Actions memungkinkan Anda menulis fungsi yang dijalankan di server langsung dari client component tanpa membuat API route terpisah.

// app/api/hello/route.ts
'use server';

export async function POST(request: Request) {
  const { name } = await request.json();
  return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
}

Selanjutnya, buat client component yang memanggil server action:

// components/GreetForm.tsx
'use client';
import { useState, useTransition } from 'react';
import { experimental_useServerAction } from 'next/server';

export default function GreetForm() {
  const [name, setName] = useState('');
  const [greeting, setGreeting] = useState('');
  const [isPending, startTransition] = useTransition();

  const submit = experimental_useServerAction(async (formData: FormData) => {
    const res = await fetch('/api/hello', {
      method: 'POST',
      body: JSON.stringify({ name: formData.get('name') }),
      headers: { 'Content-Type': 'application/json' },
    });
    const data = await res.json();
    setGreeting(data.greeting);
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('name', name);
    startTransition(() => submit(formData));
  };

  return (
    

      

         setName(e.target.value)}
          placeholder="Your name"
          className="flex-1 p-2 border rounded"
          required
        />
        
      

      {greeting && 
{greeting}
}
    

  );
}

Integrasikan komponen ini ke halaman utama:

// app/page.tsx
import GreetForm from '@/components/GreetForm';

export default function Home() {
  return (
    

      
Server Action Demo

      
    

  );
}

Keuntungan: mengurangi boilerplate API routes, otomatis menangani CSRF, dan menjaga tipe data lewat TypeScript.

7. Pengaturan TypeScript Strict Mode & ESLint

Edit tsconfig.json untuk mengaktifkan strict mode:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Pastikan eslint memperingatkan penggunaan any dan memberlakukan import order. Jalankan npm run lint secara rutin.

8. Optimasi Produksi – Image, Font, dan Caching

  • Next/Image: gunakan next/future/image untuk format AVIF/WebP otomatis.
  • Font Optimization: deklarasikan font di next.config.js dengan next/font/google sehingga hanya subset yang dibutuhkan yang di‑download.
  • Cache‑Control: tambahkan header Cache‑Control: public, max-age=31536000, immutable pada static assets via next.config.js.
// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'api.publicapis.org' }],
  },
  experimental: {
    serverActions: true,
  },
  async headers() {
    return [
      {
        source: '/:all*(svg|png|jpg|jpeg|webp)',
        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }],
      },
    ];
  },
};

9. CI/CD dengan GitHub Actions & Vercel

Berikut contoh workflow minimal untuk lint, test, dan deploy ke Vercel:

# .github/workflows/ci.yml
name: CI & Deploy
on:
  push:
    branches: [main]
  pull_request:
    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.x'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - 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: .
          git-filter: ''

Pastikan token dan ID disimpan di GitHub Secrets. Vercel otomatis meng‑detect next.config.js dan men‑enable serverless functions untuk Server Actions.

10. Deploy ke Production dan Monitoring

  • Gunakan vercel --prod atau push ke branch main pada repo yang terhubung.
  • Aktifkan Vercel Analytics untuk metric Core Web Vitals.
  • Integrasikan Health Checks di /api/health untuk uptime monitoring.
// app/api/health/route.ts
export async function GET() {
  return new Response(JSON.stringify({ status: 'ok', timestamp: Date.now() }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
}

Dengan endpoint ini, layanan monitoring seperti Upptime atau Grafana dapat mem‑ping tiap menit.

11. Best Practice Tambahan

  • Folder Alias: tambahkan paths di tsconfig.json ("@/components/*": ["components/*"]).
  • Code Splitting: gunakan dynamic(() => import('@/components/Heavy')) untuk komponen berat.
  • Security: set Content‑Security‑Policy header di next.config.js dan hindari dangerouslySetInnerHTML kecuali dibersihkan dengan DOMPurify.
  • Testing: gunakan jest + @testing-library/react untuk unit dan integration test pada client components, serta @vercel/edge-runtime untuk server action tests.

Ikuti checklist ini sebelum melakukan release:

  1. Lint bebas error.
  2. Semua unit test lulus (coverage > 80%).
  3. Build sukses di CI.
  4. Performance audit (Lighthouse) > 90 pada semua kategori.

Dengan mengikuti tutorial ini Anda kini memiliki proyek Next.js 14 yang sepenuhnya terstruktur—menggunakan App Router, Server Actions, TypeScript strict mode, serta pipeline CI/CD otomatis ke Vercel. Implementasi best practice di atas menjamin kode tetap bersih, aman, dan siap skala produksi. Selamat mengembangkan aplikasi React modern yang cepat dan mudah dipelihara!
Tutorial step‑by‑step setup Next.js 14 dengan App Router, Server Actions, TypeScript, CI/CD, dan best practice produksi pada tahun 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