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

Next.js 14 hadir dengan fitur App Router yang revolusioner, server components, dan integrasi TypeScript yang semakin mulus. Tutorial ini membimbing Anda step‑by‑step menginstal, mengkonfigurasi, dan membangun aplikasi modern siap produksi.

1. Prasyarat

Pastikan Anda memiliki:

• Node.js >= 20.0 (LTS)
• npm atau yarn (versi terbaru)
• Git
• Editor kode – VS Code disarankan dengan ekstensi Next.js dan ESLint

2. Instalasi Next.js 14

# Buat folder proyek baru
mkdir next14-app && cd next14-app

# Inisialisasi dengan npm (atau gunakan yarn)
npm init -y

# Install Next.js 14, React 19, dan TypeScript
npm install next@14 react@19 react-dom@19
npm install -D typescript @types/react @types/node

Setelah instalasi selesai, jalankan perintah berikut untuk meng‑generate file konfigurasi TypeScript secara otomatis:

npx next telemetry disable   # non‑aktifkan telemetry untuk privasi
npx next build               # akan memicu pembuatan tsconfig.json

3. Struktur Direktori dengan App Router

Next.js 14 memperkenalkan app/ folder yang menggantikan pages/. Buat struktur berikut:

app/
├─ layout.tsx          # Layout global
├─ page.tsx            # Home page
├─ globals.css         # Styling global
├─ dashboard/
│  ├─ layout.tsx      # Layout dashboard
│  └─ page.tsx        # Dashboard utama
└─ api/
   └─ hello/route.ts # API route contoh

4. Konfigurasi Global

File next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,                 // Aktifkan App Router
    serverActions: true,          // Fitur server actions (Beta)
  },
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: '**',
    }],
  },
};
module.exports = nextConfig;

Tambahkan tsconfig.json (hasil otomatis biasanya sudah cukup). Pastikan compilerOptions.moduleResolution diset ke NodeNext untuk mendukung ES modules.

5. Membuat Layout Global

// 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: 'Demo aplikasi modern dengan App Router dan Server Components',
};

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

          
Next.js 14 • App Router
        
        {children}
      
    
  );
}

Layout ini akan merender di semua route, termasuk header sederhana.

6. Membuat Halaman Home 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 server‑side (tanpa useEffect)
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const repo = await res.json();

  return (
    

      
Selamat Datang di Next.js 14
      
Repositori Next.js memiliki {repo.stargazers_count.toLocaleString()} bintang di GitHub.
      
      

        ▶ Ke Dashboard
      
    
  );
}

Karena berada di server, fetch dijalankan pada server dan tidak menambah bundle JavaScript di klien.

7. Dashboard dengan Client Component

// app/dashboard/page.tsx
'use client'; // menandakan Client Component
import { useState, useEffect } from 'react';

export default function Dashboard() {
  const [time, setTime] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    

      
Dashboard Interaktif
      
Waktu lokal Anda: {time}
    
  );
}

Gunakan 'use client' hanya pada bagian yang membutuhkan interaktivitas, menjaga bundle tetap ringan.

8. API Route Modern (Route Handlers)

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from Next.js 14 API Route!' });
}

Route handlers menggantikan pages/api dan mendukung metode HTTP secara eksplisit.

9. Menambahkan ESLint & Prettier (Best Practice)

# Install dev dependencies
npm install -D eslint prettier eslint-config-next eslint-plugin-react-hooks

# Inisialisasi konfigurasi
npx eslint --init

# Contoh .eslintrc.json
{
  "extends": ["next", "next/core-web-vitals", "plugin:react-hooks/recommended"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@next/next/no-html-link-for-pages": "off"
  }
}

Gunakan npm run lint dan npm run format dalam CI pipeline untuk memaksa kualitas kode.

10. Deploy ke Vercel (Zero‑Config)

1. Push repository ke GitHub.
2. Buka Vercel dan pilih New Project.
3. Hubungkan repo, Vercel otomatis mendeteksi app/ dan mengaktifkan edge runtime.
4. Set environment variable NEXT_PUBLIC_API_URL jika diperlukan.
5. Deploy selesai dalam menit.

Anda juga dapat menggunakan vercel --prod dari CLI untuk preview lokal.

11. Optimasi Performance (Best Practice)

• Server Components untuk data‑heavy UI, mengurangi JS di klien.
• Image Optimization dengan next/image – gambar otomatis di‑compress.
• Incremental Static Regeneration (ISR) pada halaman yang jarang berubah: tambahkan revalidate pada generateMetadata atau fetch dengan next: { revalidate: 60 }.
• Cache-Control Header pada API route: gunakan NextResponse.json(..., { headers: { 'Cache-Control': 's-maxage=60' } }).

12. Testing dengan Jest & React Testing Library

# Install testing dependencies
npm install -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

# jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)
  

  Next.js 14 memperkenalkan paradigma baru melalui App Router dan Server Components, memungkinkan developer membangun aplikasi web yang cepat, ringan, dan mudah dipelihara. Dengan mengikuti langkah‑langkah instalasi, konfigurasi, serta praktik terbaik seperti linting, testing, dan CI/CD, Anda dapat mempercepat time‑to‑market sambil menjaga kualitas kode. Deploy ke Vercel memberikan pengalaman zero‑config yang ideal untuk tim kecil hingga skala besar. Selamat mengeksplorasi kekuatan Next.js 14 dalam proyek Anda!
  

  Panduan step‑by‑step setup Next.js 14 dengan App Router, Server Components, TypeScript, linting, testing, CI/CD, dan deployment ke Vercel. Cocok untuk developer web modern.
  

  

  Programming,Software Engineering,Web Development
  

  

  #Programming #SoftwareEngineering #WebDev #Tech #Coding
: '/app/$1',
  },
};

# Contoh test untuk HomePage
// __tests__/HomePage.test.tsx
import { render, screen } from '@testing-library/react';
import HomePage from '@/app/page';

test('renders welcome message', async () => {
  render(await HomePage());
  expect(screen.getByText(/Selamat Datang di Next.js 14/i)).toBeInTheDocument();
});

Jalankan npm test untuk memastikan komponen berfungsi.

13. CI/CD dengan GitHub Actions

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
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 test
      - run: npm run build

Pipeline ini men‑lint, test, dan build sebelum merging, menjaga stabilitas produksi.

14. Ringkasan Step

1. Instal Node.js 20, buat proyek, instal Next.js 14 & TypeScript.
2. Konfigurasi next.config.js dengan experimental appDir.
3. Buat struktur app/ (layout, page, dashboard, API).
4. Gunakan Server Components untuk data‑fetching, Client Components hanya bila interaktif.
5. Tambahkan linting, testing, dan CI.
6. Deploy ke Vercel untuk hosting zero‑config.

Dengan mengikuti tutorial ini Anda akan memiliki basis kode modern yang siap dikembangkan lebih lanjut—misalnya menambahkan React Server Actions, edge middleware, atau integrasi GraphQL.

{{ $json.conclusion }}

---

{{ $json.seo.meta_description }}

{{ $json.seo.keywords }}

{{ $json.hashtags }}