Panduan Lengkap Setup Next.js 14 dengan App Router & React Server Components di 2026

Muhammad Akil Mei 31, 2026


Next.js 14 telah menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini membimbing Anda langkah demi langkah menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14 dengan App Router, React Server Components, dan fitur‑fitur terbaru seperti Streaming SSR dan Edge Runtime.

1. Prasyarat

Pastikan Anda memiliki:

  • Node.js v20.10 atau lebih baru (download di nodejs.org)
  • npm v10 atau Yarn v4 (pilih salah satu)
  • Git untuk version control
  • Editor kode – VS Code direkomendasikan

2. Membuat Proyek Next.js 14 Baru

# Menggunakan npm
npm create next-app@latest my-next14-app -- -e with-app-router

# Atau dengan Yarn
yarn create next-app my-next14-app --example with-app-router

Perintah di atas meng‑generate struktur folder yang sudah memakai app/ directory (App Router) dan mengaktifkan React Server Components secara default.

2.1. Struktur Direktori Utama

my-next14-app/
├─ app/                # App Router (pages dipindah ke sini)
│   ├─ layout.tsx      # Layout global
│   ├─ page.tsx        # Halaman beranda (Server Component)
│   └─ api/            # Route Handlers (Edge/Node)
├─ public/             # Asset statis
├─ styles/             # CSS/SCSS
├─ next.config.mjs    # Konfigurasi Next.js
├─ tsconfig.json       # Jika menggunakan TypeScript
└─ package.json

3. Instalasi Dependensi Tambahan

Untuk contoh ini, tambahkan Tailwind CSS, Prisma (ORM), dan dotenv untuk variabel lingkungan.

# Tailwind CSS
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Prisma & SQLite (contoh DB ringan)
npm i prisma @prisma/client
npx prisma init --datasource-provider sqlite

# dotenv (pengelolaan .env)
npm i dotenv

3.1. Konfigurasi Tailwind

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

Tambahkan direktif Tailwind ke app/globals.css:

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

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

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,                     // App Router aktif
    serverActions: true,              // Server Actions (beta) untuk mutasi data
    serverComponentsExternalPackages: ["@prisma/client"],
  },
  images: { remotePatterns: [{ protocol: "https", hostname: "images.unsplash.com" }] },
  // Edge Runtime untuk API routes
  runtime: "edge",
};
export default nextConfig;

5. Membuat Layout Global dengan Server Component

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

export const metadata: Metadata = {
  title: "Next.js 14 – App Router Demo",
  description: "Contoh proyek dengan React Server Components, Tailwind, dan Prisma",
};

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

6. Membuat API Route (Edge Runtime) untuk Menyimpan Data

Gunakan app/api/todos/route.ts sebagai contoh CRUD sederhana.

// app/api/todos/route.ts
import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET() {
  const todos = await prisma.todo.findMany();
  return NextResponse.json(todos);
}

export async function POST(req: Request) {
  const { title } = await req.json();
  const todo = await prisma.todo.create({ data: { title } });
  return NextResponse.json(todo, { status: 201 });
}

File prisma/schema.prisma:

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

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

7. Membuat Halaman Daftar Todo (Server Component) dan Form (Client Component)

// app/page.tsx (Server Component)
import TodoList from "../components/TodoList";
import AddTodo from "../components/AddTodo";

export default async function Home() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/todos`, { cache: "no-store" });
  const todos = await res.json();
  return (
    

      
Todo App (Next.js 14)

      
      
    

  );
}

Komponen Client untuk menambahkan todo:

// components/AddTodo.tsx
"use client";
import { useState } from "react";

export default function AddTodo() {
  const [title, setTitle] = useState("");
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title) return;
    await fetch(`/api/todos`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title }),
    });
    window.location.reload(); // sederhana untuk demo
  };
  return (
    

       setTitle(e.target.value)}
        placeholder="Tambah todo baru"
      />
      
    

  );
}

Komponen Server untuk menampilkan list:

// components/TodoList.tsx
export default function TodoList({ items }: { items: any[] }) {
  return (
    
    
      {items.map(todo => (
        
  • 
          {todo.title}
        
    • 
      ))}
    

  );
}

8. Optimasi Performance & Best Practices

  • Streaming SSR: Gunakan fetch(..., { next: { revalidate: 10 } }) untuk incremental static regeneration.
  • Edge Runtime untuk API: Pastikan route handler berada di app/api dan set runtime: "edge" di next.config.mjs untuk latency rendah.
  • Server Actions: Pada Next.js 14 beta, gunakan 'use server' di dalam komponen client untuk mutasi data tanpa menulis endpoint terpisah.
  • Image Optimization: Manfaatkan next/image dengan remote patterns untuk gambar Unsplash.
  • Security: Aktifkan HTTP‑only cookies, Content‑Security‑Policy melalui next-secure-headers dan sanitasi input di server.

9. Deploy ke Vercel (Zero‑Config)

  1. Commit semua perubahan ke repository GitHub.
  2. Buka Vercel dan pilih “New Project”.
  3. Import repository, pastikan Framework Preset = “Next.js”.
  4. Atur environment variable DATABASE_URL (contoh: file:./dev.db untuk SQLite atau gunakan PostgreSQL di Vercel).
  5. Deploy – Vercel otomatis menjalankan npm run build dengan Node.js 20.

10. Testing & CI/CD dengan GitHub Actions

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build

Gunakan next lint (ESLint + Next.js plugin) dan jest atau playwright untuk testing UI.


Dengan mengikuti tutorial ini, Anda kini memiliki aplikasi Next.js 14 yang memanfaatkan App Router, React Server Components, dan Edge Runtime. Struktur project yang bersih, integrasi Tailwind, Prisma, serta pipeline CI/CD siap mempercepat siklus pengembangan. Terapkan best practice security dan performance untuk memastikan aplikasi tetap scalable dan siap produksi di Vercel atau platform cloud lainnya.
Panduan lengkap step-by-step setup Next.js 14 dengan App Router, React Server Components, Tailwind, Prisma, dan deployment ke Vercel. Cocok untuk developer Web Development 2026.

Programming,Software Engineering,Web Development,Next.js,React,App Router

#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