Panduan Lengkap Setup Next.js 14 dengan App Router, Server Components, dan TypeScript pada Juni 2026

Next.js 14 menjadi standar de‑facto untuk pengembangan web React modern. Tutorial ini membimbing Anda dari instalasi hingga deployment, lengkap dengan contoh kode, konfigurasi, dan best practice terkini.

1. Prasyarat

Pastikan mesin Anda memiliki:

• Node.js v20.12 atau lebih tinggi (node -v)
• npm v10 atau Yarn v4 (npm -v / yarn -v)
• Git untuk version control

2. Instalasi Next.js 14 dengan TypeScript

Jalankan perintah berikut di terminal untuk membuat project baru:

npx create-next-app@latest my-next14-app \
  --ts \
  --eslint \
  --experimental-app

Opsi --experimental-app mengaktifkan App Router secara default, yang sudah stabil di versi 14.

2.1 Verifikasi Struktur Proyek

Setelah selesai, struktur utama akan terlihat seperti:

my-next14-app/
├─ app/               # App Router root
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ globals.css
├─ public/
├─ src/
│  └─ ...
├─ next.config.mjs
├─ tsconfig.json
└─ package.json

3. Konfigurasi Dasar

3.1 next.config.mjs

Tambahkan pengaturan berikut untuk meningkatkan performa dan keamanan:

import { defineConfig } from 'next';

export default defineConfig({
  reactStrictMode: true,
  swcMinify: true,
  images: { remotePatterns: [{ protocol: 'https', hostname: '**' }] },
  experimental: {
    serverComponentsExternalPackages: ['@prisma/client']
  }
});

3.2 ESLint & Prettier

Instal plugin recommended:

npm i -D eslint eslint-config-next prettier
npx eslint --init    # pilih "Use a popular style guide" → "Next.js"

Tambahkan file .prettierrc dengan format standar:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

4. Membuat Halaman dengan Server Component

4.1 Buat Layout

// 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: 'Tutorial step‑by‑step dengan App Router & Server Components',
};

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

4.2 Buat Route dengan Server Component

// app/page.tsx (Server Component secara default)
import Image from 'next/image';
import Link from 'next/link';

export default async function HomePage() {
  // Contoh fetch data secara server‑side (no client bundle)
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const repo = await res.json();

  return (
    

      
Welcome to Next.js 14
      
Repository stars: {repo.stargazers_count}
      
      About this demo
    
  );
}

4.3 Client Component untuk Interaktivitas

Buat file app/components/Counter.tsx:

'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    
  );
}

Import di halaman:

// app/page.tsx (lanjutan)
import Counter from './components/Counter';
...
      
...

5. Integrasi Database dengan Prisma (Server Component)

5.1 Instalasi Prisma 5

npm i -D prisma@5 @prisma/client@5
npx prisma init --datasource-provider postgresql

Ubah .env dengan kredensial PostgreSQL Anda.

5.2 Definisikan Model

// prisma/schema.prisma
model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  createdAt DateTime @default(now())
}

Jalankan migrasi:

npx prisma migrate dev --name init

5.3 Fetch di Server Component

// app/posts/page.tsx
import { prisma } from '@/lib/prisma';

export default async function PostsPage() {
  const posts = await prisma.post.findMany({ orderBy: { createdAt: 'desc' } });
  return (
    

      
Latest Posts
      

        {posts.map(p => (
          
{p.title}
        ))}
      
    
  );
}

6. Optimasi Performansi

• Streaming: gunakan await di dalam komponen untuk streaming data ke client tanpa menunggu seluruh query selesai.
• Edge Runtime: tambahkan export const runtime = 'edge'; pada route yang sangat ringan untuk menurunkan latency.
• Image Optimization: manfaatkan next/image dengan loader: 'default' untuk CDN otomatis.

7. Testing dengan Jest & React Testing Library

npm i -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom
npx jest --init   # pilih "Node" environment, "ts-jest" preset

Contoh test untuk Counter:

// __tests__/Counter.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from '@/app/components/Counter';

test('increments count on click', () => {
  render();
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(button).toHaveTextContent('Clicked 1 times');
});

8. CI/CD dengan GitHub Actions & Vercel

8.1 Workflow GitHub Actions

# .github/workflows/deploy.yml
name: Deploy Next.js 14 to Vercel
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .

8.2 Pengaturan di Vercel

1. Buat project baru di dashboard Vercel dan hubungkan repository GitHub.
2. Tambahkan environment variable DATABASE_URL untuk Prisma.
3. Aktifkan Next.js Edge Functions bila membutuhkan runtime edge.

9. Best Practice Tambahan

• Folder Struktur: gunakan app/ untuk rute, components/ untuk UI yang reusable, lib/ untuk utilitas seperti Prisma client.
• Typed API Routes: bila menggunakan app/api/, definisikan request/response schema dengan Zod untuk validasi.
• Security: aktifkan Content‑Security‑Policy di next.config.mjs, hindari penggunaan dangerouslySetInnerHTML kecuali sudah disanitasi.
• Monitor: integrasikan Vercel Analytics atau LogRocket untuk memantau real‑user metrics.

10. Deploy dan Verifikasi

Setelah workflow selesai, Vercel akan men-deploy otomatis. Buka URL yang diberikan, periksa:

• Halaman utama menampilkan data GitHub repo (Server Component).
• Counter berfungsi (Client Component).
• Daftar posting dari PostgreSQL muncul di /posts.

Jika semua tampak baik, proyek Anda siap produksi.

Next.js 14 menyatukan kekuatan App Router, Server Components, dan integrasi TypeScript dalam satu paket yang mudah di‑setup. Dengan mengikuti tutorial ini, Anda tidak hanya memperoleh aplikasi yang modern dan performant, tetapi juga fondasi CI/CD yang solid, testing otomatis, serta praktik keamanan dan optimasi terbaru. Selamat membangun!

---

Panduan lengkap langkah demi langkah setup Next.js 14 dengan App Router, Server Components, TypeScript, Prisma, testing, dan CI/CD menggunakan Vercel pada 2026.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding