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

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Dalam tutorial ini, Anda akan dipandu langkah‑demi‑langkah menginstal, mengonfigurasi proyek, menulis kode contoh, serta menerapkan best practice untuk performa dan keamanan.

1. Prasyarat dan Instalasi Node.js

Pastikan Anda menggunakan Node.js versi LTS terbaru (v20.x) yang tersedia di nodejs.org. Verifikasi dengan:

node -v
npm -v

Jika belum terpasang, unduh dan instal. Pada macOS/Linux Anda dapat memakai nvm untuk mengelola versi.

2. Membuat Proyek Next.js 14 dengan TypeScript

npx create-next-app@latest my-next14-app --ts --eslint --tailwind

Perintah di atas menghasilkan struktur folder standar, mengaktifkan TypeScript, ESLint, dan Tailwind CSS. Masuk ke folder proyek:

cd my-next14-app

3. Mengaktifkan App Router

Next.js 14 memperkenalkan app/ directory sebagai default router. Anda hanya perlu memastikan folder app ada di root (sudah dibuat oleh scaffolding). Hapus folder pages untuk menghindari konflik.

3.1 Membuat Layout Global

mkdir -p app/layouts

// app/layout.tsx
import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        My Next.js 14 App
        
      
      {children}
    
  );
}

4. Menambahkan Server Actions (Experimental)

Server Actions memungkinkan Anda menulis fungsi server langsung di dalam komponen React tanpa membuat API route terpisah. Aktifkan di next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};
module.exports = nextConfig;

4.1 Contoh Formulir Todo dengan Server Action

// app/page.tsx
'use client';
import { useState, FormEvent } from 'react';

export default function Home() {
  const [todos, setTodos] = useState([]);

  async function addTodo(formData: FormData) {
    'use server';
    const text = formData.get('text') as string;
    // Simulasi penyimpanan di database (di sini hanya return)
    return text;
  }

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    const data = new FormData(form);
    const newTodo = await addTodo(data);
    setTodos((prev) => [...prev, newTodo]);
    form.reset();
  };

  return (
    
      Todo List (Server Action)
      
        
        
      
      
        {todos.map((t, i) => (
          {t}
        ))}
      
    
  );
}

Catatan: Karena masih experimental, pastikan environment NODE_ENV=development untuk testing, dan periksa dokumen resmi untuk batasan produksi.

5. Konfigurasi ESLint dan Prettier (Best Practice)

Next.js sudah meng‑install ESLint, tapi kita tambahkan rule yang lebih ketat:

# instal dependensi
npm install -D eslint-config-next eslint-plugin-react-hooks prettier eslint-config-prettier

# .eslintrc.json
{
  "extends": ["next", "next/core-web-vitals", "prettier"],
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

# .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

Tambahkan script lint & format di package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "format": "prettier --write ."
}

6. Optimasi Performa dengan Edge Runtime & Incremental Static Regeneration (ISR)

Gunakan Edge Runtime untuk halaman yang tidak membutuhkan akses database intensif:

// app/blog/[slug]/page.tsx
export const runtime = 'edge';

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR, refresh tiap 60 detik
  });
  const post = await res.json();
  return (
    
      {post.title}
      
    
  );
}

7. Deploy ke Vercel (Zero‑Config)

Push repository ke GitHub.
Buka Vercel dan pilih New Project.
Hubungkan repository, Vercel otomatis mendeteksi Next.js 14.
Atur lingkungan NODE_ENV=production dan variabel rahasia jika ada.
Deploy! Vercel akan memberikan URL https://my-next14-app.vercel.app.

8. Keamanan dasar

Gunakan Content‑Security‑Policy header di next.config.js via headers() untuk mencegah XSS.
Hindari menaruh secrets di client, selalu gunakan process.env. pada server side atau API routes.
Aktifkan strictTransportSecurity pada Vercel melalui pengaturan domain.

9. Testing dengan Jest dan React Testing Library

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

# jest.config.ts
export default {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)
  

  Dengan mengikuti langkah‑demi‑langkah di atas, Anda kini memiliki aplikasi Next.js 14 yang modern, tipe‑aman, dan siap produksi. Anda telah memanfaatkan App Router, Server Actions, ISR, serta best practice keamanan, linting, testing, dan CI/CD. Selanjutnya, eksplorasi integrasi third‑party seperti Prisma untuk database atau NextAuth untuk otentikasi, dan terus pantau update resmi Next.js karena ekosistemnya bergerak cepat.
  
  Tutorial lengkap setup Next.js 14 dengan App Router, Server Actions, TypeScript, linting, testing, dan deployment ke Vercel. Panduan step-by-step untuk developer modern.
  

  

  Programming,Software Engineering,Web Development
  

  

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

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

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

10. CI/CD dengan GitHub Actions

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
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 test
      - run: npm run build

Pipeline ini memastikan setiap commit melewati lint, test, dan build sebelum merge.

{{ $json.conclusion }}

kabesma