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

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React modern dengan App Router, React Server Components, dan dukungan TypeScript yang lebih baik. Ikuti tutorial step‑by‑step ini untuk menyiapkan proyek, konfigurasi, menulis kode contoh, serta menerapkan best practice untuk performance dan keamanan.

1. Persiapan Lingkungan

Pastikan Anda memiliki versi Node.js terbaru (v20 atau lebih tinggi) dan npm/yarn yang ter‑update. Cek versi dengan perintah:

node -v
npm -v

Jika belum terpasang, unduh dari nodejs.org. Kami merekomendasikan penggunaan pnpm untuk manajemen paket yang lebih cepat.

2. Membuat Proyek Next.js 14 Baru

1. Jalankan perintah init dengan template TypeScript:

pnpm create next-app@latest my-next14-app --ts

Anda akan diminta memilih opsi. Pilih "App Router (recommended)" ketika ditanya tentang routing model.

3. Struktur Proyek dan App Router

Setelah selesai, struktur folder utama akan terlihat seperti ini:

my-next14-app/
├─ app/                # App Router (layout, page, loading, error)
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ globals.css
├─ public/
├─ src/
│  └─ components/
├─ tsconfig.json
└─ package.json

Folder app menggantikan pages dan mendukung file layout.tsx serta page.tsx secara default.

4. Menjalankan Development Server

pnpm dev

Buka http://localhost:3000 di browser. Anda akan melihat halaman starter Next.js 14 dengan TypeScript.

5. Konfigurasi TypeScript & ESLint

Next.js sudah menyertakan tsconfig.json yang optimal, namun Anda dapat menambahkan stricter rules:

{
  "extends": "next/core-web-vitals",
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "baseUrl": "./",
    "paths": { "@/*": ["src/*"] }
  }
}

Instal ESLint dan plugin React:

pnpm add -D eslint eslint-config-next prettier

Tambahkan skrip lint di package.json:

"scripts": { "lint": "next lint" }

6. Mengaktifkan React Server Components (RSC)

Secara default, semua file di folder app dianggap sebagai Server Component kecuali Anda menambahkan 'use client' di bagian atas file.

6.1 Membuat Server Component

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const res = await fetch('https://api.example.com/stats')
  const data = await res.json()
  return (
    

      
Dashboard
      
{JSON.stringify(data, null, 2)}
    
  )
}

Fungsi di atas dijalankan sepenuhnya di server, mengurangi bundle size pada klien.

6.2 Membuat Client Component

// src/components/Counter.tsx
'use client'
import { useState } from 'react'

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

Import komponen ini di Server Component untuk interaktivitas:

// app/dashboard/page.tsx
import Counter from '@/src/components/Counter'

export default async function DashboardPage() { /* ... */ return () }

7. Menggunakan Middleware untuk Security

Buat file middleware.ts di root proyek untuk menambahkan header keamanan dan rate‑limit sederhana.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()
  // Content Security Policy (CSP) yang ketat
  response.headers.set('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'")
  // X‑Frame‑Options
  response.headers.set('X-Frame-Options', 'DENY')
  // Rate limit placeholder (implementasi real dengan Redis/Upstash)
  return response
}

export const config = {
  matcher: '/:path*', // apply to semua route
}

8. Deploy ke Vercel (Free Tier)

1. Push repository ke GitHub.
2. Buka vercel.com dan login dengan GitHub.
3. Import project, pilih framework "Next.js". Vercel otomatis mendeteksi app router.
4. Set environment variable jika diperlukan (misal API_KEY).
5. Deploy! Vercel meng‑build dengan next build dan menyediakan preview URL.

Jika Anda menggunakan domain custom, tambahkan di Settings → Domains.

9. Best Practice untuk Performansi & Skalabilitas

• Static Segment Caching: Gunakan export const revalidate = 60 pada Page atau Layout untuk ISR (Incremental Static Regeneration).
• Image Optimization: Pakai next/image dengan loader="custom" jika CDN sendiri.
• Code Splitting: Letakkan komponen berat di folder components dan import secara dinamis dengan next/dynamic.
• Env Management: Simpan rahasia di Vercel Dashboard atau gunakan .env.local (tidak commit).
• Testing: Tambahkan Jest + React Testing Library. Contoh instalasi:

pnpm add -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

Konfigurasi jest.config.ts:

export default { preset: 'ts-jest', testEnvironment: 'jsdom', moduleNameMapper: { '^@/(.*)
  

  Dengan mengikuti tutorial di atas, Anda kini memiliki aplikasi Next.js 14 yang modern, aman, dan siap untuk skala produksi. Menggunakan App Router bersama React Server Components meminimalkan bundle size, sementara middleware, ISR, dan monitoring memastikan performa serta keandalan. Jangan lupa terus mengikuti rilis resmi Next.js dan komunitas di GitHub, Dev.to, atau Reddit untuk mengadopsi fitur terbaru sebelum menjadi standar industri.
  

  Panduan lengkap setup Next.js 14 dengan App Router, React Server Components, TypeScript, security middleware, dan deployment Vercel. Langkah demi langkah untuk developer modern.
  

  

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

  

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

10. Monitoring & Error Tracking

Integrasikan Sentry untuk capture error runtime:

pnpm add @sentry/nextjs

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'
Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN })

Deploy kembali, lalu cek dashboard Sentry untuk error real‑time.

11. Upgrade ke Next.js 15 (preview) – Tips Future‑Proof

Jika ingin mencoba fitur preview Next.js 15, tambahkan di package.json:

"next": "15.0.0-canary.3"

Jalankan pnpm install dan periksa changelog resmi di GitHub Releases untuk migrasi step‑by‑step.

12. Ringkasan Step‑by‑Step (Checklist)

1. Install Node 20+ dan pnpm.
2. Create project dengan pnpm create next-app@latest my-next14-app --ts.
3. Jalankan pnpm dev dan verifikasi localhost.
4. Konfigurasi tsconfig.json & ESLint.
5. Implementasikan Server & Client Components.
6. Tambahkan middleware untuk security headers.
7. Deploy ke Vercel, set env vars.
8. Optimasi dengan ISR, next/image, dan dynamic import.
9. Setup testing (Jest) dan monitoring (Sentry).
10. Catat proses upgrade ke versi next‑canary bila diperlukan.

{{ $json.conclusion }}

---

{{ $json.seo.meta_description }}

{{ $json.seo.keywords }}

{{ $json.hashtags }}