Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Tailwind CSS pada 2026

Next.js 14 menjadi standar baru untuk aplikasi React modern. Tutorial ini membimbing Anda langkah demi langkah mulai dari instalasi, konfigurasi, hingga contoh kode produksi, lengkap dengan best practice untuk keamanan dan performa.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

• Node.js v20.10+ (unduh di nodejs.org)
• npm atau Yarn 2+
• Git untuk version control
• Editor kode modern (VS Code direkomendasikan)

2. Membuat Proyek Next.js 14 Baru

2.1 Inisialisasi dengan create-next-app

npx create-next-app@latest my-next14-app \
  --typescript \
  --app-dir \
  --eslint \
  --src-dir

Parameter --app-dir mengaktifkan App Router (fitur default di Next.js 14). Pilihan --src-dir memisahkan source code di folder src/ untuk struktur yang lebih bersih.

2.2 Masuk ke Direktori Proyek

cd my-next14-app

2.3 Jalankan Server Development

npm run dev

Browser otomatis membuka http://localhost:3000 menampilkan halaman "Welcome to Next.js!".

3. Menambahkan Tailwind CSS (v3.4)

3.1 Instalasi Dependency

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3.2 Inisialisasi Konfigurasi

npx tailwindcss init -p

File tailwind.config.js dan postcss.config.js dibuat.

3.3 Konfigurasi Tailwind

/** tailwind.config.js */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}" // App Router directory
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3.4 Tambahkan Direktif ke CSS Global

Ganti isi src/app/globals.css dengan:

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

4. Memahami App Router & Layouts

4.1 Struktur Direktori

/app
  /layout.tsx          // Root layout
  /page.tsx            // Home page
  /dashboard
    /layout.tsx        // Dashboard layout
    /page.tsx          // Dashboard utama
    /settings
      /page.tsx        // Sub‑page

File layout.tsx berfungsi seperti _app.tsx pada Pages Router, tetapi lebih fleksibel karena dapat digabungkan per segment.

4.2 Contoh Root Layout dengan Tailwind

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

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

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

5. Server Actions – Pengganti API Routes

5.1 Apa Itu Server Actions?

Server Actions memungkinkan Anda menulis fungsi server langsung di dalam komponen React, menghilangkan kebutuhan file /api terpisah. Ini meningkatkan latency dan menyederhanakan kode.

5.2 Mengaktifkan Experimental Feature

Tambahkan flag di next.config.js:

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

5.3 Contoh Server Action: Menyimpan Todo ke SQLite

Instalasi SQLite dan Prisma (ORM) untuk demo cepat.

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

Ubah prisma/schema.prisma:

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

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

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

Jalankan migrasi:

npx prisma migrate dev --name init

5.4 Membuat Server Action di Component

/* src/app/dashboard/page.tsx */
'use server'; // penting untuk menandai fungsi server
import { prisma } from '@/lib/prisma';

export async function addTodoAction(title: string) {
  'use server';
  await prisma.todo.create({ data: { title } });
}

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

  return (
    

      
Todo List
      

        
        
      
      

        {todos.map(todo => (
          

            {todo.title}
          
        ))}
      
    
  );
}

Catatan:

• Prefix 'use server' di dalam fungsi memastikan eksekusi di server.
• Form secara otomatis mengirim request POST ke server action, tanpa fetch manual.

6. Deployment ke Vercel (Zero‑Config)

6.1 Push ke GitHub

git init
git add .
git commit -m "Initial commit - Next.js 14 with Server Actions"
git branch -M main
git remote add origin https://github.com/USERNAME/my-next14-app.git
git push -u origin main

6.2 Import di Vercel

Masuk ke Vercel Dashboard, klik New Project, pilih repository, biarkan semua pengaturan default (Next.js detection otomatis). Vercel akan meng‑install dependencies, menjalankan next build, dan meng‑deploy.

6.3 Variabel Lingkungan

Tambahkan DATABASE_URL=file:./dev.db di Settings → Environment Variables agar Prisma menemukan SQLite di lingkungan Vercel.

7. Best Practice untuk Produksi

• TypeScript Strict Mode: Pastikan tsconfig.json memiliki "strict": true untuk type safety.
• Image Optimization: Gunakan next/image untuk otomatis meng‑optimasi gambar.
• Security Headers: Tambahkan middleware di src/middleware.ts untuk CSP, X‑Content‑Type‑Options, dll.
• Cache‑Control: Server Actions tidak boleh di‑cache; gunakan Cache-Control: no-store pada respons bila diperlukan.
• Monitoring: Integrasikan dengan Vercel Analytics atau Sentry untuk error tracking.

8. Troubleshooting Umum

• "Server Actions is not enabled": Pastikan flag experimental.serverActions ada di next.config.js dan restart dev server.
• Prisma "SQLite file not found": Pastikan file dev.db berada di root dan variabel DATABASE_URL benar.
• Tailwind tidak menghasilkan style: Periksa content array di tailwind.config.js mencakup semua folder app dan src.

Next.js 14 dengan App Router dan Server Actions memberikan cara paling efisien untuk membangun aplikasi React full‑stack di 2026. Dengan mengikuti langkah‑langkah di atas—instalasi, konfigurasi Tailwind, pembuatan Server Actions, dan deployment ke Vercel—Anda akan memiliki basis kode yang modern, scalable, dan siap produksi. Ingat untuk menerapkan best practice keamanan, tipe ketat, dan monitoring agar aplikasi tetap stabil dalam jangka panjang.

---

Panduan langkah demi langkah setup Next.js 14 dengan App Router, Server Actions, Tailwind CSS, dan deployment Vercel. Tutorial terbaru 2026 untuk developer web modern.

Programming,Software Engineering,Web Development,Next.js 14,Server Actions,Tailwind CSS,Vercel

#Programming #SoftwareEngineering #WebDev #Tech #Coding