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

Muhammad Akil Juni 10, 2026


Next.js 14 memperkenalkan App Router yang revolusioner, Server Actions, dan peningkatan performa native. Tutorial ini memberi langkah‑by‑step lengkap—dari instalasi, konfigurasi, contoh kode, hingga best practice—untuk membangun aplikasi React modern yang siap produksi pada Juni 2026.

1. Prasyarat dan Persiapan Lingkungan

Sebelum memulai, pastikan komputer Anda memiliki:

  • Node.js v20.12.0 atau lebih tinggi (LTS)
  • npm 10.x atau yarn 4
  • Git untuk version control
  • Editor kode (VS Code rekomendasi) dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense

Verifikasi instalasi dengan:

node -v
npm -v

2. Membuat Proyek Next.js 14 Baru

Gunakan create-next-app yang sudah ter‑update ke versi 14.

npx create-next-app@latest my-next14-app --typescript --app
cd my-next14-app

Flag --app secara otomatis mengaktifkan App Router serta struktur folder app/ yang baru.

3. Instalasi Dependensi Tambahan

Untuk tutorial ini, kami tambahkan beberapa paket populer:

# Tailwind CSS untuk styling cepat
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

# Prisma sebagai ORM (SQLite untuk contoh)
npm i prisma@latest @prisma/client
npx prisma init --datasource-provider sqlite

# React Hook Form & Zod untuk validasi form
npm i react-hook-form zod @hookform/resolvers

# next-auth untuk otentikasi (provider GitHub)
npm i next-auth@latest

4. Konfigurasi Tailwind CSS

Edit tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambah import Tailwind ke app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Membuat Struktur Folder App Router

Struktur standar:

app/
├─ layout.tsx          # Root layout
├─ page.tsx            # Homepage
├─ dashboard/
│   ├─ layout.tsx
│   └─ page.tsx
└─ api/
    └─ auth/
        └─ route.ts   # NextAuth handler

Semua file page.tsx otomatis menjadi route berdasarkan posisi folder.

6. Implementasi Root Layout dengan Server Components

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

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

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

Root layout dijalankan di server (Server Component) secara default, memberi keuntungan Zero‑bundle cost untuk CSS dan font.

7. Membuat Server Action untuk Menyimpan Data dengan Prisma

Server Actions diperkenalkan di Next.js 14 sebagai fungsi yang dieksekusi langsung di server tanpa API route terpisah.

/** app/dashboard/action.ts */
'use server';
import { prisma } from '@/lib/prisma';
import { redirect } from 'next/navigation';

export async function addTask(formData: FormData) {
  const title = formData.get('title') as string;
  if (!title) throw new Error('Title is required');

  await prisma.task.create({
    data: { title, completed: false },
  });
  // Redirect back ke dashboard setelah selesai
  redirect('/dashboard');
}

Catatan: 'use server' menandai fungsi sebagai server‑only, menghindari eksposisi ke client.

8. Membuat UI Form dengan React Hook Form + Zod + Server Action

/** app/dashboard/page.tsx */
import { addTask } from './action';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

const schema = z.object({
  title: z.string().min(3, 'Minimal 3 karakter'),
});

type FormValues = z.infer;

export default async function DashboardPage() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = handleSubmit((data) => {
    const formData = new FormData();
    formData.append('title', data.title);
    addTask(formData);
  });

  // Fetch tasks server‑side
  const tasks = await prisma.task.findMany({ orderBy: { createdAt: 'desc' } });

  return (
    

      
Dashboard

      

        
        
      

      {errors.title && 
{errors.title.message}
}
      
    
        {tasks.map((t) => (
          
  • 
            {t.title}
          
    • 
        ))}
      

    

  );
}

Form dijalankan sepenuhnya di client, namun pengiriman data diserahkan ke Server Action addTask.

9. Konfigurasi Prisma dengan SQLite (Production bisa switch ke Postgres)

// prisma/schema.prisma
 datasource db {
   provider = "sqlite"
   url      = env("DATABASE_URL")
 }

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

 model Task {
   id        Int      @id @default(autoincrement())
   title     String
   completed Boolean  @default(false)
   createdAt DateTime @default(now())
 }

Jalankan migrasi:

npx prisma migrate dev --name init

Untuk produksi, ubah provider ke postgresql dan set DATABASE_URL di Vercel atau Railway.

10. Menambahkan Otentikasi dengan NextAuth (GitHub Provider)

/** app/api/auth/[...nextauth]/route.ts */
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';

export const auth = NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

export const GET = auth.handler;
export const POST = auth.handler;

Gunakan next-auth/react di komponen untuk melindungi halaman:

import { useSession, signIn, signOut } from 'next-auth/react';

export default function Header() {
  const { data: session } = useSession();
  return (
    

      
MyApp

      {session ? (
        
      ) : (
        
      )}
    

  );
}

11. Optimasi Performance – Streaming, Edge Runtime, dan Image

  • Streaming: gunakan export const dynamic = 'force-dynamic'; hanya bila diperlukan; default Next.js 14 melewatkan rendering statis bila data berubah.
  • Edge Runtime: pindahkan API route yang ringan ke edge dengan export const runtime = 'edge';.
  • Next/Image (v14) kini mendukung Remote Images tanpa konfigurasi tambahan—gunakan <Image src="https://source.unsplash.com/…" width={800} height={450} alt="" />.

12. Deploy ke Vercel (Recommended) atau Railway

Langkah-langkah Vercel:

  1. Push repo ke GitHub.
  2. Buka Vercel Dashboard dan pilih repository.
  3. Pastikan Node.js Version diset ke 20.x.
  4. Tambahkan environment variables: DATABASE_URL, GITHUB_ID, GITHUB_SECRET.
  5. Deploy! Vercel otomatis mengaktifkan next/font, image optimization, dan edge caching.

Untuk Railway (PostgreSQL), hubungkan DB URL ke variable yang sama dan aktifkan prisma migrate deploy pada build script.

13. Best Practice & Tips Tambahan

  • Type‑Safety: selalu gunakan TypeScript dan generik Prisma (prisma.task.findMany() menghasilkan tipe otomatis).
  • Linting & Formatting: tambahkan eslint-config-next dan prettier ke skrip "lint" dan "format".
  • Incremental Static Regeneration (ISR): untuk halaman publik yang berubah jarang, gunakan revalidate = 60 di fetch atau generateStaticParams.
  • Security: aktifkan Content‑Security‑Policy di next.config.js, gunakan helmet pada edge functions jika diperlukan.
  • Testing: rekomendasikan jest + @testing-library/react untuk unit, dan playwright untuk e2e.

14. Menjalankan Local Development dengan Docker (Opsional)

# Dockerfile
FROM node:20-alpine AS base
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=base /app/.next ./.next
COPY --from=base /app/node_modules ./node_modules
COPY --from=base /app/public ./public
EXPOSE 3000
ENV NODE_ENV=production
CMD ["npm", "start"]

Jalankan:

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

Docker memudahkan konsistensi antar tim dan CI/CD pipeline.

15. CI/CD dengan GitHub Actions

name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - 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 }}
          github-token: ${{ secrets.GITHUB_TOKEN }}

Pipeline memastikan code linted, ter‑test, dan otomatis deploy setelah merge.

16. Monitoring & Logging

Integrasikan Sentry atau Logtail untuk error tracking. Pada next.config.js tambahkan env:

module.exports = {
  env: {
    SENTRY_DSN: process.env.SENTRY_DSN,
  },
};

Lalu di app/layout.tsx import Sentry init.

17. Ringkasan Step‑by‑Step

  1. Instal Node.js v20+ dan buat proyek dengan create-next-app --app.
  2. Tambahkan Tailwind, Prisma, React Hook Form, Zod, NextAuth.
  3. Konfigurasi Tailwind dan Prisma schema.
  4. Buat Root Layout, Dashboard page, dan Server Action addTask.
  5. Setup otentikasi GitHub lewat NextAuth.
  6. Optimalkan performa dengan streaming, edge runtime, dan Next/Image.
  7. Deploy ke Vercel (atau Railway) dengan environment variables.
  8. Implementasikan best practice: linting, testing, security headers.
  9. Opsional: containerize dengan Docker dan CI/CD lewat GitHub Actions.
  10. Tambahkan monitoring Sentry untuk production.

Dengan mengikuti langkah di atas, Anda memiliki basis aplikasi Next.js 14 yang modern, scalable, dan siap di‑maintain selama bertahun‑tahun.


Next.js 14 menggabungkan kekuatan App Router, Server Actions, dan integrasi penuh dengan TypeScript serta ORM modern seperti Prisma. Tutorial ini memberi fondasi yang kuat untuk membangun aplikasi Web Development yang cepat, aman, dan mudah dipelihara. Dengan mengikuti best practice, menambahkan CI/CD, dan memanfaatkan deployment di Vercel, proyek Anda akan siap bersaing di era cloud-native Programming dan Software Engineering pada 2026.
Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, Prisma, dan NextAuth. Tutorial step-by-step, contoh kode, serta best practice untuk performance dan security dalam Web Development.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

Let's collaborate, innovate, and build the future of technology together!

Posting Komentar

0 Komentar