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

Pelajari cara menginstal, mengkonfigurasi, dan mengembangkan aplikasi modern menggunakan Next.js 14—framework React terbaru yang mengusung App Router, Server Actions, dan streaming SSR. Tutorial ini menampilkan langkah demi langkah, contoh kode, serta best practice untuk menghasilkan aplikasi yang scalable, aman, dan cepat.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki perangkat lunak berikut terpasang:

• Node.js v20.10 atau yang lebih baru (download)
• npm v10 atau Yarn v4 (pilih salah satu)
• Git untuk version control
• Editor kode, disarankan Visual Studio Code dengan ekstensi ESLint dan Prettier

Jika Anda menggunakan Windows, disarankan mengaktifkan WSL2 untuk lingkungan Linux yang lebih konsisten.

2. Membuat Project Next.js 14

npx create-next-app@latest my-next14-app --typescript --experimental-app-router

Perintah di atas akan:

• Menginisialisasi proyek dengan TypeScript
• Mengaktifkan App Router (fitur eksperimental pada rilis awal, kini menjadi default)
• Menginstall dependensi dasar seperti react, react-dom, dan next versi 14

Setelah selesai, masuk ke folder proyek:

cd my-next14-app

3. Struktur Direktori Baru di Next.js 14

Next.js 14 memperkenalkan struktur app/ yang menggantikan pages/. Berikut contoh struktur penting:

my-next14-app/
├─ app/
│  ├─ layout.tsx        # Layout global
│  ├─ page.tsx          # Halaman beranda (route "/")
│  ├─ dashboard/
│  │   ├─ layout.tsx    # Layout khusus dashboard
│  │   └─ page.tsx      # Route "/dashboard"
│  └─ api/
│      └─ hello/route.ts # API Route dengan Server Action
├─ public/
├─ styles/
├─ next.config.mjs
└─ tsconfig.json

Perhatikan bahwa api/ berada di dalam app/ dan menggunakan file route.ts untuk mengekspor fungsi server.

4. Instalasi Dependensi Tambahan

Untuk meningkatkan developer experience, install beberapa paket berikut:

npm i -D eslint prettier eslint-plugin-react eslint-config-prettier \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm i swr   # untuk data fetching client-side yang revalidasi otomatis
npm i @radix-ui/react-icons   # ikon UI modern

Selanjutnya, buat file konfigurasi .eslintrc.cjs dan .prettierrc (referensi dapat diambil dari repo with-eslint).

5. Membuat Layout Global dengan layout.tsx

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

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

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

          
Next.js 14 Studio
        
        
{children}
      
    
  );
}

Layout ini menambahkan header global dan mengaplikasikan styling Tailwind (Jika Tailwind belum terinstall, lihat langkah tambahan di bagian Optional: Tailwind CSS).

6. Membuat Halaman Beranda dengan Server Component

/** app/page.tsx */
import Link from 'next/link';
import { fetchLatestPosts } from '@/lib/posts';

export default async function HomePage() {
  const posts = await fetchLatestPosts();
  return (
    

      
Latest Blog Posts
      

        {posts.map((post) => (
          

            {post.title}
          
        ))}
      
    
  );
}

Fungsi fetchLatestPosts dijalankan di server, sehingga tidak menambah beban bundle client.

7. Membuat API Route dengan Server Action

Server Actions memungkinkan Anda mengeksekusi fungsi di server langsung dari komponen client tanpa membuat endpoint terpisah.

/** app/api/hello/route.ts */
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  return NextResponse.json({ message: 'Hello from Next.js 14 Server Action!' });
}

// Contoh Server Action yang dipanggil dari komponen client
export async function actionGreet(name: string) {
  // Operasi berat, misalnya panggilan ke DB atau AI API
  return `Hello, ${name}!`; 
}

Untuk menggunakan actionGreet di client, buat komponen dengan 'use client' dan panggil fungsi tersebut.

8. Komponen Client yang Memanggil Server Action

/** components/GreetingForm.tsx */
'use client';
import { useState, useTransition } from 'react';
import { actionGreet } from '@/app/api/hello/route';

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    startTransition(async () => {
      const result = await actionGreet(name);
      setGreeting(result);
    });
  };

  return (
    

       setName(e.target.value)}
        className="border p-2 rounded"
        required
      />
      
      {greeting && 
{greeting}
}
    
  );
}

Dengan useTransition, UI tetap responsif saat server action sedang diproses.

9. Optimasi Performance – Streaming & Incremental Static Regeneration (ISR)

Next.js 14 mendukung streaming SSR secara default. Untuk mengaktifkannya pada halaman tertentu, gunakan fetch dengan next: { revalidate: 60 } untuk ISR.

/** lib/posts.ts */
export async function fetchLatestPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }, // cache selama 60 detik
  });
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

Dengan konfigurasi di atas, halaman beranda akan di‑render secara server‑side, lalu secara otomatis di‑regenerate setiap menit tanpa downtime.

10. Best Practice untuk Keamanan & Skalabilitas

• Env Variables: Simpan rahasia di .env.local dan akses via process.env.NEXT_PUBLIC_* untuk yang boleh di‑expose.
• Header Security: Tambahkan Content-Security-Policy di next.config.mjs menggunakan next-secure-headers plugin.
• Image Optimization: Gunakan next/image dengan domain eksternal whitelist di next.config.mjs.
• Rate Limiting API: Implementasikan middleware Edge Function untuk membatasi request per IP.
• Type Safety: Manfaatkan TypeScript generik pada fetch wrapper untuk menghindari runtime errors.

11. Deploy ke Vercel (One‑Click)

1. Push repository ke GitHub.
2. Buka Vercel Dashboard dan pilih repository.
3. Vercel otomatis mendeteksi Next.js 14 dan mengatur build command npm run build serta output .next.
4. Set environment variables pada halaman Settings > Environment Variables.
5. Deploy selesai – URL preview tersedia dalam hitungan detik.

Jika Anda menggunakan Docker, lihat bagian Optional di bawah.

12. Optional: Menambahkan Tailwind CSS

# Install Tailwind & peer dependencies
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.ts
import type { Config } from 'tailwindcss';
export default {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
} satisfies Config;

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

Setelah itu, Anda dapat langsung memakai utility class Tailwind di seluruh komponen.

13. Testing dengan Jest & React Testing Library

# Install testing libs
npm i -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

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

  Next.js 14 membawa paradigma baru seperti App Router, Server Actions, dan streaming SSR yang mempercepat development dan meningkatkan performa aplikasi. Dengan mengikuti langkah‑step yang dijabarkan—mulai dari instalasi, konfigurasi, penulisan kode server dan client, hingga deployment di Vercel—Anda dapat membangun aplikasi full‑stack modern yang scalable, secure, dan mudah dipelihara. Jangan lupa mengadopsi best practice keamanan, testing, serta monitoring untuk menjaga kualitas produksi jangka panjang.
  

  Panduan lengkap step-by-step setup Next.js 14 dengan App Router, Server Actions, dan optimasi performance. Termasuk contoh kode, konfigurasi, best practice, dan deployment ke Vercel.
  

  

  Programming,Software Engineering,Web Development,Next.js,React,Server Actions,App Router,Performance Optimization
  

  

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

# contoh test
// __tests__/GreetingForm.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import GreetingForm from '@/components/GreetingForm';

test('renders input and button', () => {
  render();
  expect(screen.getByPlaceholderText('Your name')).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /greet/i })).toBeInTheDocument();
});

Jalankan npm test untuk mengeksekusi suite.

14. Monitoring & Error Tracking

Integrasikan Sentry atau Vercel Analytics untuk melacak error produksi:

# Install Sentry SDK
npm i @sentry/nextjs

# sentry.server.config.ts
import * as Sentry from '@sentry/nextjs';
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 1.0,
});

Set SENTRY_DSN di environment Vercel.

15. Clean‑up & Dokumentasi

• Perbarui README.md dengan langkah run, test, dan deploy.
• Gunakan npm run lint dan npm run format sebelum commit.
• Buat pull‑request template yang menuntut penambahan unit test.

Dengan mengikuti tutorial ini, Anda kini memiliki aplikasi Next.js 14 yang terstruktur, aman, dan siap produksi.

{{ $json.conclusion }}

---

{{ $json.seo.meta_description }}

{{ $json.seo.keywords }}

{{ $json.hashtags }}