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

Muhammad Akil Juni 08, 2026


Next.js 14 menjadi framework React modern yang memanfaatkan Turbopack untuk build ultra‑cepat serta App Router untuk routing fleksibel. Tutorial ini memandu Anda dari instalasi hingga deployment, lengkap dengan contoh kode, konfigurasi, dan best practice terkini.

1. Persiapan Lingkungan

Sebelum memulai, pastikan Anda memiliki:

  • Node.js 20.10+ (LTS) – node -v untuk cek versi.
  • npm 10+ atau Yarn 4 (Berry) – pilih satu sesuai preferensi.
  • Git 2.45+ untuk version control.
  • Editor kode modern, misalnya VS Code dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense.

2. Membuat Project Next.js 14

Gunakan create-next-app yang kini mendukung Turbopack secara default.

npx create-next-app@latest my-next14-app \
  --ts \
  --eslint \
  --app
cd my-next14-app

Opsional: tambahkan --no-eslint bila ingin mengatur linting manual.

3. Memahami Struktur App Router

Next.js 14 menggantikan pages dengan folder app. Setiap folder berfungsi sebagai route, dan file layout.tsx menentukan tata letak bersama.

app/
│   layout.tsx   // layout global
│   page.tsx     // route "/"
└── dashboard/
    │   layout.tsx   // layout khusus dashboard
    │   page.tsx     // route "/dashboard"

Gunakan loading.tsx untuk UI loading otomatis, serta error.tsx untuk handling error pada level route.

4. Mengaktifkan Turbopack (Build Engine)

Turbopack sudah menjadi default, namun pastikan next.config.js tidak menonaktifkannya.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // Turbopack sudah stabil, tidak perlu flag khusus
  },
  // Opt-in untuk SWC‑minify yang bekerja bersamaan dengan Turbopack
  swcMinify: true,
};
export default nextConfig;

Jika Anda menggunakan Yarn, jalankan yarn dev – Turbopack akan menampilkan log Turbo engine started dalam console.

5. Menambahkan Tailwind CSS (Opsional namun Populer)

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

Update tailwind.config.ts:

import type { Config } from 'tailwindcss';
export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: { extend: {} },
  plugins: [],
} satisfies Config;

Tambahkan stylesheet ke app/layout.tsx:

import './globals.css';

Dan buat globals.css dengan direktif Tailwind:

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

6. Membuat API Route dengan Edge Runtime

Next.js 14 memungkinkan API di folder app/api dengan runtime edge untuk latensi rendah.

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

export const runtime = 'edge';

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

Testing: curl http://localhost:3000/api/hello – Anda akan melihat JSON respons.

7. Mengkonfigurasi ESLint & Prettier

Next.js sudah menyertakan preset ESLint. Tambahkan file .eslintrc.json untuk aturan tambahan:

{
  "extends": ["next", "next/core-web-vitals", "plugin:prettier/recommended"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
  }
}

Prettier dapat di‑setup dengan .prettierrc:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100
}

Tambahkan script di package.json:

"scripts": {
  "lint": "next lint",
  "format": "prettier --write ."
}

8. Implementasi Authenticasi dengan NextAuth.js v5

NextAuth.js telah merilis versi 5 yang terintegrasi penuh dengan App Router.

npm install next-auth@latest

Buat folder app/api/auth/[...nextauth]/route.ts:

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export const runtime = 'edge';
export const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID!,
      clientSecret: process.env.GOOGLE_SECRET!
    })
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async session({ session }) { return session; }
  }
});

Tambahkan env di .env.local dan gunakan hook useSession di komponen client.

9. Testing dengan Playwright

Playwright menjadi standar testing end‑to‑end pada 2026.

npm i -D @playwright/test
npx playwright install

Contoh test tests/example.spec.ts:

import { test, expect } from '@playwright/test';

test('homepage has title', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/Home/);
});

Jalankan dengan npx playwright test.

10. CI/CD dengan GitHub Actions + Vercel

Vercel tetap platform hosting utama untuk Next.js. Tambahkan workflow .github/workflows/deploy.yml:

name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - run: npm ci
      - run: npm run lint
      - run: npm run build
      - name: Deploy to Vercel
        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: .
          prod: true

Pastikan secret Vercel dimasukkan di Settings repo.

11. Optimasi Performance (Best Practice)

  • Image Optimization: gunakan next/image dengan loader: 'custom' bila meng‑host di CDN selain Vercel.
  • Server‑Side Caching: aktifkan revalidate pada fetch di server components untuk ISR (Incremental Static Regeneration).
  • Code Splitting: manfaatkan dynamic() untuk lazy‑load komponen berat.
  • Bundle Analyzer: jalankan next build && npx next-bundle-analyzer untuk visualisasi.

12. Deployment dan Monitoring

Setelah CI selesai, Vercel otomatis menghasilkan URL preview. Tambahkan monitoring dengan Sentry:

npm i @sentry/nextjs

Konfigurasi di sentry.server.config.js dan sentry.client.config.js sesuai dokumentasi resmi.

13. Studi Kasus: Migrasi dari Next.js 12 ke Next.js 14

Perusahaan X melakukan upgrade 300+ repo. Langkah utama:

  1. Upgrade next ke 14.0.0 dan react ke 19.
  2. Ubah folder pages menjadi app secara bertahap, mulai dari modul yang paling stabil.
  3. Ganti getStaticProps/getServerSideProps dengan server components atau fetch + revalidate.
  4. Aktifkan Turbopack dengan menghapus next.config.js custom webpack yang tidak kompatibel.
  5. Tambahkan runtime: 'edge' pada API yang membutuhkan respon ultra‑cepat.

Hasil: waktu build berkurang 45%, TTFB 30% lebih cepat, dan biaya CDN turun karena caching yang lebih agresif.

14. Kesimpulan

Next.js 14 dengan App Router, Turbopack, dan TypeScript memberi fondasi yang modern, cepat, dan scalable. Ikuti langkah‑langkah di atas, terapkan best practice, dan manfaatkan CI/CD otomatis untuk mempercepat siklus pengembangan.


Dengan mengikuti tutorial ini, Anda tidak hanya memiliki proyek Next.js 14 yang siap produksi, tapi juga memahami arsitektur App Router, keunggulan Turbopack, serta integrasi CI/CD dan monitoring yang diperlukan untuk tim modern. Terapkan best practice yang disebutkan, dan proyek Anda akan menjadi contoh implementasi web development terkini pada tahun 2026.
Tutorial lengkap setup Next.js 14 dengan App Router, Turbopack, TypeScript, Tailwind, NextAuth, Playwright, dan CI/CD Vercel. Langkah demi langkah, contoh kode, dan best practice untuk Programming, Software Engineering, dan Web Development.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

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

Posting Komentar

0 Komentar