Panduan Lengkap Setup Next.js 14 dengan TypeScript, App Router, dan Deploy ke Vercel (2026)

Muhammad Akil Mei 27, 2026


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

1. Prerequisites

Pastikan Anda telah menginstall:

  • Node.js v20.10 atau lebih baru (download)
  • npm v10 atau Yarn v4 (pnpm juga didukung)
  • Git
  • Akun Vercel (gratis untuk proyek publik)

2. Membuat Project Next.js 14 Baru

2.1 Inisialisasi dengan Create Next App

npx create-next-app@latest my-next14-app \
  --ts \
  --eslint \
  --src-dir \
  --app-dir \
  --use-npm

Parameter yang dipilih:

  • --ts: mengaktifkan TypeScript secara otomatis.
  • --eslint: menyiapkan linting standar.
  • --src-dir: struktur kode di dalam folder src.
  • --app-dir: mengaktifkan App Router (fitur baru di Next.js 13+).

2.2 Struktur Folder Setelah Scaffold

my-next14-app/
├─ src/
│  ├─ app/          # App Router (pages replaced)
│  │  ├─ layout.tsx
│  │  ├─ page.tsx
│  │  └─ ...
│  ├─ components/
│  ├─ lib/
│  └─ styles/
├─ public/
├─ next.config.mjs
├─ tsconfig.json
└─ package.json

3. Konfigurasi Dasar

3.1 next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.unsplash.com' }
    ]
  },
  // Enable i18n jika butuh multi‑bahasa
  // i18n: { locales: ['en', 'id'], defaultLocale: 'en' },
};
export default nextConfig;

3.2 TypeScript Strict Mode

Buka tsconfig.json dan pastikan opsi berikut di‑enable:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "jsx": "preserve",
    "incremental": true,
    "paths": { "@/*": ["./src/*"] }
  }
}

4. Membuat Halaman Utama dengan App Router

4.1 layout.tsx

import '../styles/globals.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Next.js 14 Starter',
  description: 'Demo aplikasi Next.js 14 dengan TypeScript',
};

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

4.2 page.tsx (Home)

import Image from 'next/image';
import Link from 'next/link';

export default function HomePage() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen p-4">
      <h1 className="text-4xl font-bold mb-4">Selamat Datang di Next.js 14</h1>
      <Image
        src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d"
        alt="Coding"
        width={800}
        height={400}
        className="rounded-lg mb-6"
      />
      <p className="text-lg mb-4">Ini contoh halaman berbasiskan App Router dengan TypeScript.</p>
      <Link href="/about" className="text-blue-600 underline">Lihat halaman About</Link>
    </main>
  );
}

5. Menambahkan API Route (Edge Function)

Next.js 14 memungkinkan deployment API sebagai Edge Function. Buat folder app/api/hello/route.ts:

export const runtime = 'edge'; // gunakan edge runtime

export async function GET(request: Request) {
  return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
}

6. Styling dengan Tailwind CSS (Versi 3.4)

6.1 Instalasi

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

6.2 Konfigurasi tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

6.3 globals.css

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

/* Optional custom font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body {font-family: 'Inter', sans-serif;}

7. Optimasi Performansi

  • Image Optimization: gunakan next/image dengan loader: 'custom' bila memakai CDN eksternal.
  • Incremental Static Regeneration (ISR): tambahkan revalidate pada fetch atau generateStaticParams.
  • React Server Components: biarkan komponen berada di app directory tanpa 'use client' untuk rendering di server.
  • Prefetching: gunakan next/link dengan prefetch otomatis (default).

8. Testing dengan Jest & React Testing Library

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

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

  Dengan mengikuti tutorial ini, Anda kini memiliki proyek Next.js 14 yang terstruktur, type‑safe, dioptimalkan untuk performa, dilengkapi testing, dan siap di‑deploy ke Vercel. Terapkan best practice keamanan, CI/CD, dan pemantauan untuk menjaga kualitas aplikasi di lingkungan produksi.
  

  Panduan lengkap setup Next.js 14 dengan TypeScript, App Router, Tailwind, testing, dan deployment ke Vercel. Langkah demi langkah untuk developer modern.
  

  

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

  

  #Programming #SoftwareEngineering #WebDev #Tech #Coding

: '/src/$1',
  },
  setupFilesAfterEnv: ['/jest.setup.ts'],
};

# jest.setup.ts
import '@testing-library/jest-dom';

Contoh test untuk HomePage:

import { render, screen } from '@testing-library/react';
import HomePage from '@/app/page';

test('renders welcome heading', () => {
  render();
  expect(screen.getByRole('heading', { name: /selamat datang/i })).toBeInTheDocument();
});

9. Deploy ke Vercel

  1. Commit semua perubahan ke repository Git (GitHub, GitLab, atau Bitbucket).
  2. Buka Vercel Dashboard → New Project → pilih repo.
  3. Vercel otomatis mendeteksi next.config.mjs dan menginstall dependensi.
  4. Set environment variables jika ada (contoh: NEXT_PUBLIC_API_URL).
  5. Klik Deploy. Setelah selesai, Vercel menyediakan preview dan domain produksi.

10. Best Practices untuk Production

  • Enable Strict Mode – sudah di‑config di next.config.mjs.
  • Audit Bundle Size dengan next build && next analyze (paket @next/bundle-analyzer).
  • Security Headers – tambahkan middleware: 
    import { NextResponse } from 'next/server';
export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  return response;
}
  • Log Management – gunakan next-logger atau integrasi dengan Datadog.
  • CI/CD – contoh GitHub Actions: 
    name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .

11. Studi Kasus: Migrasi dari Pages Router ke App Router

Tim A memiliki aplikasi Next.js 12 berbasis pages. Mereka ingin mengadopsi App Router untuk memanfaatkan server components. Langkah yang di‑ikuti:

  1. Tambahkan app/ folder dan pindahkan pages/_app.tsx ke app/layout.tsx.
  2. Ubah semua getStaticProps menjadi generateStaticParams atau fetch di server component.
  3. Hapus next.config.js yang menon‑aktifkan experimental features karena Next.js 14 sudah stabil.
  4. Jalankan npm run lint && npm run test untuk memastikan tidak ada regressi.
  5. Deploy ke Vercel, hasilnya: 30% peningkatan First Contentful Paint (FCP) dan pengurangan bundle size sebesar 12%.

Kesimpulan: Migrasi memberi manfaat signifikan tanpa harus menulis ulang seluruh kode.


{{ $json.conclusion }}
{{ $json.seo.meta_description }}

{{ $json.seo.keywords }}

{{ $json.hashtags }}

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

Let's collaborate, innovate, and build the future of technology together!

Posting Komentar

0 Komentar