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

Next.js 14 menjadi standar baru untuk aplikasi React yang cepat, server‑side rendering modern, dan development yang lebih ringan berkat Turbopack. Tutorial ini memandu Anda langkah demi langkah menginstal, mengkonfigurasi, menulis kode contoh, serta menerapkan best practice untuk proyek produksi.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

• Node.js LTS versi 20.x atau lebih baru (download)
• pnpm sebagai package manager (direkomendasikan karena performa lebih baik). Instal dengan npm i -g pnpm
• Git untuk version control
• Editor kode modern (VS Code dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense)

2. Membuat Proyek Next.js 14 Baru

pnpm create next-app@latest my-next14-app --ts --eslint --src-dir --app
cd my-next14-app

Opsi yang dipilih:

• --ts: menambahkan TypeScript secara otomatis.
• --eslint: mengaktifkan linting dasar.
• --src-dir: memindahkan semua kode ke folder src untuk struktur yang lebih bersih.
• --app: mengaktifkan App Router yang menjadi default di Next.js 14.

3. Mengaktifkan Turbopack (Compiler Default)

Next.js 14 menggunakan Turbopack secara default pada mode development. Pastikan tidak ada fallback ke Webpack di next.config.mjs:

// next.config.mjs
import { createRequire } from 'module';
const require = createRequire(import.meta.url);

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    // Pastikan experimental features seperti appDir tetap aktif
    appDir: true,
  },
};
export default nextConfig;

Jalankan pnpm dev dan perhatikan konsol: harus muncul pesan “Turbopack dev server started”.

4. Struktur Proyek yang Disarankan

src/
├─ app/                # App Router root
│   ├─ layout.tsx      # Global layout
│   ├─ page.tsx        # Home page
│   └─ (dashboard)/   # Nested route group
│       ├─ layout.tsx
│       └─ page.tsx
├─ components/        # UI components (atomic design)
│   ├─ ui/            # Reusable UI library (Button, Card, …)
│   └─ layout/        # Layout specific components
├─ lib/               # Utility functions, API wrappers
├─ styles/            # Global CSS / Tailwind config
└─ types/             # Global TypeScript types

Struktur ini memudahkan scaling, memisahkan concerns, dan mendukung clean architecture.

5. Menambahkan Tailwind CSS (Opsional tetapi Direkomendasikan)

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Ubah tailwind.config.js:

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

Di src/app/globals.css tambahkan:

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

Now you can use utility‑first classes in any component.

6. Membuat Halaman & Komponen Contoh

6.1. Global Layout (src/app/layout.tsx)

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

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

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

          
My Next.js 14 App
        
        

          {children}
        
        

          © {new Date().getFullYear()} Next.js 14 Tutorial
        
      
    
  );
}

6.2. Home Page (src/app/page.tsx)

import Link from 'next/link';

export default function HomePage() {
  return (
    

      
Welcome to Next.js 14
      
Explore the new App Router and Turbopack speed.
      
        Go to Dashboard
      
    
  );
}

6.3. Dashboard Route Group (src/app/(dashboard)/layout.tsx)

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

      
Sidebar navigation
      

        {children}
      
    
  );
}

6.4. Dashboard Page (src/app/(dashboard)/page.tsx)

export default function DashboardPage() {
  return (
    

      
Dashboard
      
This page demonstrates nested routing with the App Router.
    
  );
}

7. Mengatur ESLint & Prettier untuk Konsistensi Kode

# Install deps
pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

# .eslintrc.cjs
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  settings: { react: { version: 'detect' } },
  env: { browser: true, node: true, es2022: true },
  rules: {
    // contoh custom rule
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
  },
};

# .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

Jalankan pnpm lint dan pnpm format dalam script npm.

8. Optimasi Performansi (Best Practice)

• Image Optimization: gunakan next/image dengan loader default. Deploy ke Vercel untuk CDN otomatis.
• Dynamic Import: pisahkan komponen berat dengan next/dynamic sehingga hanya dimuat saat diperlukan.
• Cache Header: konfigurasi next.config.mjs untuk revalidate pada halaman statis.
• Server Actions (Beta): manfaatkan API routes yang terintegrasi dengan React Server Components untuk mengurangi ukuran bundle klien.

9. Deploy ke Vercel (One‑Click)

1. Push repository ke GitHub.
2. Buka Vercel dashboard dan pilih repo.
3. Vercel otomatis mendeteksi next dan mengatur build command pnpm build serta output .next.
4. Set environment variable NODE_ENV=production jika diperlukan.
5. Deploy selesai, Anda mendapatkan URL https://your-project.vercel.app.

Jika menggunakan custom domain, tambahkan CNAME di panel DNS dan konfigurasikan di Vercel.

10. Penanganan Error dan Debugging

Next.js menyediakan overlay error di development. Untuk production, aktifkan next-runtime-logger atau gunakan Sentry dengan integrasi Next.js:

pnpm add @sentry/nextjs

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 1.0,
});

Pastikan SENTRY_DSN ditetapkan di environment Vercel.

11. Ringkasan & Checklist Produksi

• Node.js 20+, pnpm, Git
• Next.js 14 dengan App Router & Turbopack
• TypeScript, ESLint, Prettier
• Tailwind CSS (optional but recommended)
• Strategi caching, image optimization, dynamic imports
• Monitoring dengan Sentry atau solusi sejenis
• Deploy ke Vercel atau platform yang mendukung Edge Functions

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki proyek Next.js 14 yang modern, terstruktur, dan siap produksi. Kombinasi App Router, Turbopack, dan TypeScript memberikan kecepatan pengembangan serta performa runtime yang tinggi. Jangan lupa menambahkan testing (Jest + React Testing Library) dan CI/CD (GitHub Actions) untuk kualitas kode yang berkelanjutan. Selamat membangun aplikasi web masa depan!

---

Tutorial step‑by‑step setup Next.js 14 dengan App Router, Turbopack, TypeScript, Tailwind, dan best practice untuk produksi modern.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding