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

Next.js 14 menjadi pilihan utama bagi developer front‑end modern. Tutorial ini memberi langkah‑langkah detail dari instalasi hingga deployment, lengkap dengan contoh kode, konfigurasi, dan best practice terkini.

1. Prasyarat

Pastikan Anda memiliki:

• Node.js v20.10+ (unduh di nodejs.org)
• npm v10 atau Yarn v4
• Git
• Akun Vercel (untuk deployment) atau Docker bila ingin self‑host

2. Instalasi Next.js 14 dengan TypeScript

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

Perintah di atas membuat proyek baru dengan struktur standar dan TypeScript terpasang.

2.1. Verifikasi Versi

npm list next
# output contoh: next@14.2.3

Jika versi masih di bawah 14, upgrade dengan:

npm install next@latest

3. Konfigurasi Dasar (next.config.js)

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // Enable experimental app router & server actions
  experimental: {
    appDir: true,
    serverActions: true,
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }],
  },
};
module.exports = nextConfig;

Konfigurasi ini mengaktifkan App Router (folder app) dan Server Actions, fitur yang menjadi standar di Next.js 14.

4. Struktur Proyek dengan App Router

my-next14-app/
├─ app/
│  ├─ layout.tsx          # Root layout
│  ├─ page.tsx            # Landing page
│  ├─ dashboard/
│  │   ├─ layout.tsx
│  │   └─ page.tsx
│  └─ api/
│      └─ hello/route.ts # API route contoh
├─ public/
├─ styles/
└─ next.config.js

4.1. Membuat Root Layout

/* app/layout.tsx */
import './globals.css';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

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

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

5. Implementasi Server Action (CRUD sederhana)

Server Action memungkinkan Anda menulis fungsi async yang dijalankan di server tanpa API route terpisah.

5.1. Membuat model Todo (type)

// app/types.tsexport interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

5.2. Server Action di page.tsx

/* app/page.tsx */
'use server';
import { Todo } from './types';
import { v4 as uuidv4 } from 'uuid';

let todos: Todo[] = [];

export async function addTodo(title: string) {
  const newTodo: Todo = { id: uuidv4(), title, completed: false };
  todos.push(newTodo);
  return newTodo;
}

export async function toggleTodo(id: string) {
  const todo = todos.find(t => t.id === id);
  if (todo) todo.completed = !todo.completed;
  return todo;
}

export async function deleteTodo(id: string) {
  todos = todos.filter(t => t.id !== id);
  return true;
}

5.3. UI Client Component

/* app/page.tsx (lanjutan) */
import { useState, useTransition } from 'react';
import { addTodo, toggleTodo, deleteTodo } from './page';

export default function Home() {
  const [title, setTitle] = useState('');
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleAdd = async () => {
    if (!title) return;
    const newItem = await addTodo(title);
    setList(prev => [...prev, newItem]);
    setTitle('');
  };

  const handleToggle = async (id: string) => {
    startTransition(async () => {
      const updated = await toggleTodo(id);
      setList(prev => prev.map(t => (t.id === id ? updated! : t)));
    });
  };

  const handleDelete = async (id: string) => {
    await deleteTodo(id);
    setList(prev => prev.filter(t => t.id !== id));
  };

  return (
    

      
Todo List dengan Server Actions
      

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

        {list.map(todo => (
          

             handleToggle(todo.id)} />
            {todo.title}
            
          
        ))}
      
    
  );
}

5.4. Penjelasan Singkat

• 'use server' menandai bahwa file tersebut dijalankan di server.
• State todos disimpan di memori proses Node – cocok untuk demo, produksi gunakan database (PostgreSQL, PlanetScale, dll).
• React useTransition memberi UI responsif saat aksi server masih diproses.

6. Menambahkan Styling dengan Tailwind CSS 3.4

# Install Tailwind
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

# tailwind.config.js
module.exports = {
  content: ["./app/**/*.tsx", "./pages/**/*.tsx", "./components/**/*.tsx"],
  theme: { extend: {} },
  plugins: [],
};

# globals.css (import Tailwind)
@tailwind base;
@tailwind components;
@tailwind utilities;

7. Optimasi Performa & SEO

• Image Optimization: Gunakan next/image dengan loader="custom" atau remote pattern di konfigurasi.
• Static Site Generation (SSG) untuk halaman publik: tambahkan export const revalidate = 60; di file page untuk ISR.
• Metadata di app/layout.tsx agar Google menampilkan deskripsi yang tepat.
• Lazy Loading komponen berat dengan dynamic import: const Chart = dynamic(() => import('../components/Chart'), { ssr: false });

8. Testing dengan Jest & React Testing Library

# Install dev dependencies
npm install -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

# jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)
  

  Dengan mengikuti tutorial ini Anda telah menyiapkan proyek Next.js 14 modern—memanfaatkan App Router, Server Actions, TypeScript, Tailwind, testing, CI/CD, dan opsi deployment Docker. Kombinasi fitur-fitur baru meningkatkan kecepatan pengembangan, keamanan, dan performa, menjadikan aplikasi siap bersaing di era Web 3.0. Selalu perbarui dependensi dan monitor metrik produksi untuk menjaga kualitas dalam jangka panjang.
  

  Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, TypeScript, Tailwind, testing, CI/CD, dan Docker. Tutorial step-by-step 2026 untuk developer web modern.
  

  

  Programming,Software Engineering,Web Development,Next.js,TypeScript,Server Actions,Docker,CI/CD
  

  

  #Programming #SoftwareEngineering #WebDev #Tech #Coding
: '/$1',
  },
};

# Contoh test untuk Todo component
// __tests__/Todo.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import Home from '@/app/page';

test('adds a new todo', async () => {
  render();
  const input = screen.getByPlaceholderText('Tambah todo...');
  fireEvent.change(input, { target: { value: 'Belajar Next.js' } });
  const addBtn = screen.getByText('Add');
  fireEvent.click(addBtn);
  expect(await screen.findByText('Belajar Next.js')).toBeInTheDocument();
});

9. CI/CD dengan GitHub Actions + Vercel

# .github/workflows/ci.yml
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 test -- --coverage
      - 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 menjalankan lint, test, dan otomatis deploy ke Vercel pada tiap push ke main.

10. Deployment Alternatif 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
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./
EXPOSE 3000
ENV NODE_ENV=production
CMD ["npm", "start"]

Build & run:

docker build -t my-next14-app .
docker run -p 3000:3000 my-next14-app

11. Best Practice untuk Produksi

• Gunakan environment variables lewat .env.production dan process.env.NEXT_PUBLIC_* untuk data publik.
• Aktifkan strict mode di React dan swcMinify di Next config.
• Audit keamanan dengan npm audit dan perbarui dependensi secara reguler.
• Monitoring: integrasikan dengan Vercel Analytics atau layanan seperti Datadog.
• Implementasikan Rate Limiting pada API routes menggunakan next-rate-limit untuk melindungi endpoint.

{{ $json.conclusion }}

---

{{ $json.seo.meta_description }}

{{ $json.seo.keywords }}

{{ $json.hashtags }}