Panduan Lengkap Setup Next.js 14 dengan App Router & Server Actions (2026)

Pelajari cara menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14 terbaru menggunakan App Router, Server Actions, dan TypeScript. Tutorial ini mencakup instalasi, contoh kode, best practice, serta tip performance dan security.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js LTS 20.10+ dan npm 10.x atau Yarn 4.x. Versi ini sudah teruji dengan Next.js 14 pada Juni 2026.

1.1 Instalasi Node.js

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Verifikasi:

node -v   # 20.10.x
npm -v    # 10.x

1.2 Buat Folder Project

mkdir next14-demo && cd next14-demo

2. Membuat Project Next.js 14 dengan TypeScript

Gunakan create-next-app yang sudah mendukung flag --experimental-app untuk mengaktifkan App Router secara otomatis.

npx create-next-app@latest . \
  --typescript \
  --experimental-app \
  --eslint \
  --tailwind

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

3. Struktur Direktori App Router

Next.js 14 memperkenalkan folder app sebagai pengganti pages. Berikut struktur penting:

• app/layout.tsx – layout global.
• app/page.tsx – entry point.
• app/api/ – route handlers (Server Actions).
• app/(dashboard)/ – grouping dengan parentesis untuk grouping UI.

4. Konfigurasi Next.js 14 (next.config.js)

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

Penjelasan singkat:

• appDir mengaktifkan App Router.
• serverActions menyalakan API‑first Server Actions.
• typedRoutes menambahkan tipe TS untuk route definitions.

5. Membuat Layout Global

/* 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: 'Demo App Router dengan Server Actions',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
🚀 Next.js 14 Demo
        
{children}
        
© 2026
      
    
  );
}

6. Membuat Halaman Dashboard dengan Server Action

6.1 Definisikan Server Action

/* app/(dashboard)/actions.ts */
'use server';
import { revalidatePath } from 'next/cache';
import { prisma } from '@/lib/prisma'; // contoh ORM

export async function addTodo(formData: FormData) {
  const title = formData.get('title') as string;
  if (!title) throw new Error('Title required');
  await prisma.todo.create({ data: { title } });
  // Revalidate UI secara otomatis setelah insert
  revalidatePath('/(dashboard)');
}

6.2 UI dengan Form yang Memanggil Server Action

/* app/(dashboard)/page.tsx */
import { addTodo } from './actions';
import { TodoList } from '@/components/TodoList';

export default async function DashboardPage() {
  const todos = await prisma.todo.findMany({ orderBy: { createdAt: 'desc' } });
  return (
    

      
Todo Dashboard
      

        
        
      
      
    
  );
}

Catatan: Server Action dijalankan di server, sehingga tidak mengirimkan bundle JavaScript tambahan ke client.

7. Optimasi Performance

• Edge Runtime: Tambahkan export const runtime = 'edge'; pada route yang membutuhkan latency rendah.
• Incremental Static Regeneration (ISR): Pada halaman yang tidak berubah tiap detik, gunakan revalidate = 60 di file page.tsx.
• Image Optimization: Gunakan next/image dengan loader="custom" untuk CDN internal.

8. Keamanan & Best Practice

• Gunakan Content‑Security‑Policy di next.config.js atau lewat Headers di Vercel.
• Validasi semua input di Server Action, jangan mengandalkan validation client‑side.
• Aktifkan strictMode di React dan experimental.browserRoutes dinonaktifkan untuk mencegah exposure route tak terduga.
• Gunakan TypeScript strict mode ("strict": true di tsconfig.json).

9. Deploy ke Vercel (atau Railway)

# Pastikan Anda login ke Vercel CLI
npm i -g vercel
vercel login
# Deploy
vercel
# Ikuti wizard, pilih Next.js, dan biarkan environment variables otomatis terdeteksi.

Setelah deploy, Vercel otomatis mengoptimalkan Edge Functions untuk Server Actions.

10. Troubleshooting Umum

• "Server Action is not defined": Pastikan file dimulai dengan 'use server'; dan Next.js dibangun dengan experimental.serverActions aktif.
• Cache tidak ter‑refresh: Jalankan next build && next start secara lokal atau gunakan vercel --prod --force untuk memaksa redeploy.
• TypeScript error pada route params: Periksa typedRoutes di next.config.js dan pastikan tsconfig.json meng‑extend next/tsconfig.

Dengan mengikuti tutorial ini Anda kini memiliki aplikasi Next.js 14 yang modern, menggunakan App Router, Server Actions, dan TypeScript. Struktur folder bersih, performa optimal lewat Edge Functions, dan keamanan terjaga membuat proyek siap produksi. Eksplorasi lebih lanjut dengan middleware, streaming UI, atau integrasi AI seperti OpenAI SDK untuk menambah nilai bisnis.

---

Tutorial lengkap Next.js 14 2026: instalasi, konfigurasi App Router, Server Actions, TypeScript, performance & security best practice, serta deploy ke Vercel.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding