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

Next.js 14 menjadi standar baru untuk membangun aplikasi React yang cepat, SEO‑friendly, dan siap produksi. Tutorial ini mengajarkan cara menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14 dengan App Router, Server Actions, TypeScript, dan best practice terkini.

1. Prasyarat

Pastikan Anda memiliki:

• Node.js v20.x (rekomendasi LTS)
• npm atau yarn (versi terbaru)
• Git
• Editor kode (VS Code sangat direkomendasikan)

2. Membuat Project Baru

2.1. Inisialisasi dengan create‑next‑app

Buka terminal dan jalankan perintah berikut:

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

Parameter --typescript otomatis menambahkan konfigurasi TypeScript, --eslint menyiapkan linting, dan --tailwind menambahkan Tailwind CSS yang kini menjadi pilihan populer untuk styling.

2.2. Masuk ke direktori project

cd my-next14-app

3. Upgrade ke Next.js 14 (jika belum otomatis)

Versi create-next-app terbaru biasanya menyertakan Next.js 14, namun untuk memastikan gunakan:

npm install next@14 react@18 react-dom@18

Verifikasi versi dengan:

npx next --version

Anda harus melihat 14.x.x.

4. Menyiapkan App Router

4.1. Struktur folder baru

Next.js 14 memakai app/ folder sebagai router utama. Hapus atau rename pages/ jika ada, kemudian buat app/:

mkdir -p app/(components) app/(utils)

4.2. Buat layout dasar

Buat file app/layout.tsx:

import './globals.css';

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

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

4.3. Route utama

File app/page.tsx menjadi beranda:

export default function Home() {
  return (
    

      
Selamat Datang di Next.js 14
      
Mulai eksplorasi dengan Server Actions!
    
  );
}

5. Menggunakan Server Actions

Server Actions memungkinkan penanganan form tanpa API route terpisah, mempercepat pengembangan.

5.1. Aktifkan experimental flag

Tambahkan ke next.config.js:

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

module.exports = nextConfig;

5.2. Membuat Action untuk menambah item todo

Buat folder app/(components)/TodoForm.tsx:

'use server';
import { revalidatePath } from 'next/cache';
import { prisma } from '@/lib/prisma'; // contoh ORM, nanti konfigurasi

type Props = {};

export async function addTodoAction(formData: FormData) {
  const title = formData.get('title')?.toString().trim();
  if (!title) throw new Error('Title required');
  await prisma.todo.create({ data: { title } });
  // Revalidate halaman /todos
  revalidatePath('/todos');
}

export default function TodoForm() {
  return (
    
 {/* server action */}
      
      
    
  );
}

Catatan: Pastikan Anda memiliki Prisma atau ORM lain yang terhubung ke database. Pada tutorial ini, detail konfigurasi DB disajikan di bagian berikut.

5.3. Menampilkan daftar Todo

Buat app/todos/page.tsx dengan server component:

import { prisma } from '@/lib/prisma';
import TodoForm from '@/app/(components)/TodoForm';

export const revalidate = 0; // ISR disabled, rely on Server Action revalidation

async function getTodos() {
  return prisma.todo.findMany({ orderBy: { createdAt: 'desc' } });
}

export default async function TodosPage() {
  const todos = await getTodos();
  return (
    

      
Daftar Todo
      
      

        {todos.map((t) => (
          

            {t.title}
          
        ))}
      
    
  );
}

6. Menyiapkan Database dengan Prisma

6.1. Instalasi Prisma

npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

File prisma/schema.prisma akan berisi:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
}

6.2. Migrasi

npx prisma migrate dev --name init

Ini membuat dev.db di folder prisma/.

6.3. Membuat Prisma client singleton

File lib/prisma.ts:

import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  // Ensure the client is re-used during hot-reload in development
  if (!(global as any).prisma) {
    (global as any).prisma = new PrismaClient();
  }
  prisma = (global as any).prisma;
}

export { prisma };

7. Menambahkan Middleware untuk Keamanan

Next.js 14 mendukung middleware di folder middleware.ts. Tambahkan CSP dan header security:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  response.headers.set('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com");
  return response;
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

8. Optimasi Performansi

8.1. Image Optimization dengan next/image

Di dalam komponen, gunakan:

import Image from 'next/image';

export default function Hero() {
  return (
    

      
    
  );
}

8.2. Incremental Static Regeneration (ISR) untuk konten publik

Jika ada halaman blog, tambahkan:

export const revalidate = 60; // refresh tiap menit

8.3. Analisis Bundle dengan next/bundle‑analyzer

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({
  // existing config
});

Jalankan ANALYZE=true npm run build untuk melihat ukuran JS.

9. CI/CD dengan GitHub Actions

Buat file .github/workflows/nextjs.yml:

name: Deploy Next.js 14 to Vercel

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    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 build
      - 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: .
          prod: true

10. Best Practice Penutup

• Typed API: Selalu gunakan TypeScript untuk menghindari runtime error.
• Server‑only code: Letakkan logika yang berinteraksi dengan database di Server Actions atau server components agar tidak ter‑expose ke client.
• Cache strategy: Kombinasikan revalidatePath, ISR, dan Edge Caching (Vercel) untuk latensi ultra‑rendah.
• Testing: Tambahkan Jest + React Testing Library serta Playwright untuk end‑to‑end testing.

Dengan mengikuti tutorial ini Anda telah menyiapkan proyek Next.js 14 modern lengkap dengan App Router, Server Actions, Prisma, middleware security, dan pipeline CI/CD. Kombinasi ini memberikan fondasi yang scalable, performant, dan siap produksi untuk aplikasi web apapun. Terus eksplorasi fitur baru seperti Streaming, Edge Functions, dan AI‑assistants yang kini mulai ter‑integrasi ke ekosistem Next.js.

---

Panduan step‑by‑step setup Next.js 14 dengan App Router, Server Actions, TypeScript, Prisma, keamanan middleware, dan CI/CD. Cocok untuk developer yang ingin membangun aplikasi web modern.

Programming,Software Engineering,Web Development,Next.js,React,TypeScript,Server Actions

#Programming #SoftwareEngineering #WebDev #Tech #Coding