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

Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini memandu Anda langkah demi langkah menginstall, mengkonfigurasi, menulis kode contoh, dan menerapkan best practice hingga deploy ke Vercel dengan edge runtime.

1. Prasyarat & Persiapan Lingkungan

Pastikan sistem Anda memenuhi persyaratan berikut:

• Node.js >= 20.12 (LTS)
• npm atau Yarn 2+
• Git
• Akun Vercel (gratis tersedia)
• IDE favorit (VS Code direkomendasikan dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense)

2. Instalasi Next.js 14 dengan TypeScript

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

# Inisialisasi proyek dengan template app router
npm create next-app@latest . --ts --experimental-app

# Pilih "yes" untuk instalasi dependensi otomatis

Perintah di atas menghasilkan struktur proyek dengan src/app sebagai entry point, TypeScript terkonfigurasi, dan next versi 14 terpasang.

3. Konfigurasi Dasar

3.1. next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // Aktifkan Edge Runtime default untuk semua route
  experimental: {
    appDir: true,
    runtime: 'edge',
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }],
  },
};
export default nextConfig;

Konfigurasi di atas memastikan semua halaman menggunakan Edge Runtime, mempercepat TTFB, dan mengaktifkan strict mode untuk deteksi bug.

3.2. ESLint & Prettier

npm i -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks

# Buat .eslintrc.json
cat > .eslintrc.json <<'EOF'
{
  "extends": ["next/core-web-vitals", "plugin:react/recommended", "prettier"],
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}
EOF

# Buat .prettierrc
cat > .prettierrc <<'EOF'
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}
EOF

Dengan linting otomatis, kode tetap konsisten dan mudah dibaca.

4. Membuat Struktur Aplikasi

4.1. Layout Global

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

export const metadata: Metadata = {
  title: 'Next.js 14 Tutorial',
  description: 'Demo app dengan App Router, TypeScript, dan Tailwind CSS',
};

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

4.2. Halaman Beranda

// src/app/page.tsx
import Image from 'next/image';

export default function HomePage() {
  return (
    

      
Selamat Datang di Next.js 14
      
      
Aplikasi ini menggunakan App Router, TypeScript, dan Tailwind CSS pada Edge Runtime.
    
  );
}

4.3. API Route dengan Edge Function

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

export const runtime = 'edge'; // optional, menegaskan edge

export async function GET() {
  return NextResponse.json({ message: 'Hello from Edge Function!' });
}

Endpoint ini dapat diakses di /api/hello dan dijalankan pada Vercel Edge Network.

5. Menambahkan Tailwind CSS (versi 3.4)

# Instalasi Tailwind & postcss
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest

# Inisialisasi konfigurasi
npx tailwindcss init -p

# tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

# globals.css (src/app/globals.css)
@tailwind base;
@tailwind components;
@tailwind utilities;

Setelah selesai, jalankan npm run dev untuk melihat styling.

6. Optimasi Performance & Security

• Image Optimization: Gunakan next/image dengan remote pattern yang di‑whitelist di next.config.js. Vercel secara otomatis mengoptimalkan ukuran dan format.
• Server‑Side Caching: Tambahkan header Cache-Control pada API Edge Functions bila data bersifat statis.

  export async function GET() {
    const resp = NextResponse.json({message:'cached'});
    resp.headers.set('Cache-Control', 's-maxage=60, stale-while-revalidate');
    return resp;
  }
  

• Content Security Policy (CSP): Tambahkan meta tag di layout.tsx atau gunakan next-secure-headers untuk melindungi XSS.

7. Testing dengan Jest & React Testing Library

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

# jest.config.ts
export default {
  testEnvironment: 'jsdom',
  transform: { '^.+\\.(ts|tsx)
  

  Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki aplikasi Next.js 14 modern yang menggunakan App Router, TypeScript, Tailwind CSS, serta Edge Runtime. Kode terstruktur, teruji, dan siap di‑deploy melalui pipeline CI/CD ke Vercel. Terapkan best practice keamanan dan performa untuk menjaga kualitas produk Anda dalam skala produksi.
  

  Tutorial step‑by‑step setup Next.js 14 dengan App Router, TypeScript, Tailwind, CI/CD, dan deploy ke Vercel. Termasuk contoh kode, konfigurasi, dan best practice untuk Programming, Software Engineering, dan Web Development.
  

  

  Programming,Software Engineering,Web Development
  

  

  #Programming #SoftwareEngineering #WebDev #Tech #Coding
: 'ts-jest' },
  moduleNameMapper: { '^@/(.*)
  

  {{ $json.conclusion }}
  

  {{ $json.seo.meta_description }}
  

  

  {{ $json.seo.keywords }}
  

  

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

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

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

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

Jalankan npm test untuk memastikan semua komponen berfungsi.

8. 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'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --watchAll=false
      - name: Build
        run: npm run build

Workflow ini memastikan setiap commit melalui lint, test, dan build sebelum merge.

9. Deploy ke Vercel

1. Login ke Vercel dan hubungkan repositori GitHub.
2. Vercel otomatis mendeteksi Next.js dan memilih Edge Runtime berdasarkan next.config.js.
3. Set environment variable jika diperlukan (mis. NEXT_PUBLIC_API_URL).
4. Klik Deploy. Setelah selesai, Anda dapat mengakses URL https://your-project.vercel.app.

10. Best Practice Tambahan

• File‑Based Routing: Hindari penggunaan pages folder; gunakan app untuk segmentasi yang lebih jelas.
• Incremental Static Regeneration (ISR): Tambahkan revalidate pada generateStaticParams bila konten berubah tiap beberapa menit.
• Type Safety: Manfaatkan zod atau yup untuk validasi input pada API Edge Functions.
• Monitoring: Aktifkan Vercel Analytics atau integrasikan dengan Sentry untuk error tracking.

{{ $json.conclusion }}

---

{{ $json.seo.meta_description }}

{{ $json.seo.keywords }}

{{ $json.hashtags }}