Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Pendalaman Konfigurasi Turbopack dan Compiler

Sesuaikan Turbopack, transformasi, dan compiler berbasis SWC untuk build yang lebih cepat serta keluaran yang lebih kecil.

Pelajaran 2 dari 413 langkah

Pendalaman Konfigurasi Turbopack dan Compiler adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Alasan Turbopack Dibuat

Next.js 15 menyertakan Turbopack sebagai bundler default untuk next dev. Turbopack dibuat dengan Rust untuk menggantikan pipeline Webpack berbasis JavaScript yang selama bertahun-tahun mendukung Next.js.

Masalah utama yang dihadapi Webpack pada skala besar: setiap perubahan berkas memicu penelusuran graf dan evaluasi ulang JavaScript. Dengan 10.000 modul, satu perubahan dapat memerlukan 8–15 detik sebelum HMR muncul di peramban.

Turbopack mengatasi masalah ini dengan tiga keputusan arsitektural:

Komputasi inkremental — hanya modul yang terdampak perubahan yang dievaluasi ulang, bukan seluruh graf.
Kompilasi paralel — konkurensi Rust yang aman memungkinkan beberapa inti CPU mengubah berkas secara bersamaan.
Cache persisten — hasil transformasi disimpan di disk dan tetap tersedia setelah proses dimulai ulang.

Hasilnya: waktu mulai dingin berkurang sekitar 50–75% pada aplikasi besar, dan latensi HMR turun menjadi milidetik satu digit dalam banyak kasus.

Mengaktifkan Turbopack dalam next.config.ts

Dalam Next.js 15, next dev --turbopack adalah cara yang direkomendasikan untuk mengaktifkannya selama pengembangan. Untuk build produksi, Webpack masih menjadi default hingga Turbopack mencapai kesetaraan penuh, sehingga Anda mengendalikan tanda ini untuk setiap perintah dalam package.json.

Anda juga dapat menyematkan opsi Turbopack langsung di dalam next.config.ts di bawah kunci experimental.turbo (diubah namanya menjadi turbopack dalam API stabil).

Poin penting yang perlu diingat:

Kunci turbopack hanya memengaruhi next dev; build produksi tetap menggunakan Webpack kecuali Anda meneruskan --turbopack ke next build (eksperimental dalam v15).
Opsi dalam turbopack digabungkan di atas default bawaan Turbopack — Anda tidak perlu menyalin seluruh konfigurasi.
Berkas konfigurasi TypeScript (next.config.ts) memberikan keamanan tipe penuh untuk opsi ini melalui tipe NextConfig.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  turbopack: {
    // Turbopack-specific options go here
    // (rules, resolveAlias, resolveExtensions, etc.)
  },
};

export default config;

Loader Turbopack: Menggantikan Aturan Webpack

Webpack menggunakan module.rules dengan loader seperti babel-loader atau raw-loader. Turbopack memiliki padanan yang disebut rules di dalam blok konfigurasi turbopack.

Setiap aturan memetakan glob ekstensi berkas ke satu atau beberapa loader yang kompatibel dengan Turbopack. Perhatikan bahwa loader Webpack tidak kompatibel secara langsung — Turbopack memerlukan loader yang menerapkan API transformasinya sendiri, meskipun banyak loader populer (misalnya @svgr/webpack, @mdx-js/loader) telah menerbitkan versi yang kompatibel dengan Turbopack.

Anatomi sebuah aturan:

test — string glob atau regex yang mencocokkan jalur berkas
use — array objek loader, masing-masing dengan nama paket loader dan objek options opsional

Loader dijalankan dari kanan ke kiri, persis seperti dalam Webpack.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  turbopack: {
    rules: {
      // Transform .svg files into React components
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
      // Transform raw .txt files into string modules
      '*.txt': {
        loaders: ['raw-loader'],
        as: '*.js',
      },
    },
  },
};

export default config;

Alias Modul dengan resolveAlias

Alias jalur memungkinkan Anda menulis import { Button } from '@ui/Button', bukan ../../components/ui/Button. Turbopack mendukungnya melalui turbopack.resolveAlias, yang mencerminkan resolve.alias milik Webpack.

Anda juga harus menyelaraskan paths dalam tsconfig.json — kompiler TypeScript menggunakan paths untuk pemeriksaan tipe, sedangkan Turbopack menggunakan resolveAlias untuk bundling. Ketidaksesuaian menyebabkan kesalahan "modul tidak ditemukan" saat build, meskipun tipe terlihat benar di editor Anda.

Pola umum: tentukan pemetaan kanonis di satu tempat dan turunkan kedua konfigurasi darinya, atau gunakan next/jest yang secara otomatis membaca jalur tsconfig.json untuk Jest.

// next.config.ts
import type { NextConfig } from 'next';
import path from 'path';

const config: NextConfig = {
  turbopack: {
    resolveAlias: {
      '@ui': path.resolve(__dirname, 'src/components/ui'),
      '@lib': path.resolve(__dirname, 'src/lib'),
      '@server': path.resolve(__dirname, 'src/server'),
    },
  },
};

export default config;

// tsconfig.json (keep in sync)
// {
//   "compilerOptions": {
//     "paths": {
//       "@ui/*": ["./src/components/ui/*"],
//       "@lib/*": ["./src/lib/*"],
//       "@server/*": ["./src/server/*"]
//     }
//   }
// }

SWC: Kompilator Bawaan Next.js

Bersama Turbopack, Next.js menggunakan SWC (Speedy Web Compiler) sebagai transformer kode. SWC juga ditulis dalam Rust dan menangani penghapusan TypeScript, transformasi JSX, minifikasi, serta transformasi sintaksis opsional.

Perbedaan penting:

Turbopack adalah bundler — membangun graf modul, menyelesaikan impor, dan mengatur pemisahan kode.
SWC adalah transformer — mengonversi setiap file (TS → JS, JSX → pemanggilan React.createElement, dan sebagainya).

Keduanya aktif secara default di Next.js 15. SWC menggantikan Babel untuk sebagian besar proyek; jika repositori Anda masih memiliki .babelrc, Next.js akan kembali menggunakan Babel dan menonaktifkan SWC — ini merupakan penyebab umum build lambat pada proyek yang dimigrasikan.

Untuk memastikan SWC aktif, jalankan next build dan cari "SWC minify" pada output.

Mengonfigurasi Transformasi SWC di next.config.ts

Transformasi SWC dikonfigurasi pada tingkat teratas NextConfig (bukan di dalam turbopack). Opsi yang paling sering disesuaikan adalah:

compiler.styledComponents — mengaktifkan plugin SWC untuk styled-components, dengan menambahkan nama tampilan dan nama kelas yang deterministik.
compiler.emotion — fungsi yang sama untuk pustaka CSS-in-JS Emotion.
compiler.removeConsole — menghapus pemanggilan console.* dari build produksi. Anda dapat memasukkan metode tertentu ke daftar pengecualian (misalnya mempertahankan console.error).
compiler.reactRemoveProperties — menghapus props React kustom (seperti data-testid) dari output produksi sehingga ukuran payload HTML berkurang.

Transformasi ini dijalankan pada setiap file selama kompilasi, jadi waktu build tetap singkat jika Anda hanya mengaktifkan opsi yang diperlukan.

// next.config.ts
import type { NextConfig } from 'next';

const isProd = process.env.NODE_ENV === 'production';

const config: NextConfig = {
  compiler: {
    // Remove console.log but keep console.error in production
    removeConsole: isProd
      ? { exclude: ['error', 'warn'] }
      : false,

    // Strip data-testid attributes from JSX in production
    reactRemoveProperties: isProd
      ? { properties: ['^data-testid$'] }
      : false,

    // Enable styled-components SWC plugin
    styledComponents: true,
  },
};

export default config;

Minifikasi SWC vs Terser

Next.js 15 menggunakan SWC untuk minifikasi secara default (swcMinify: true kini menjadi default implisit). Ini menggantikan Terser, yaitu minifier berbasis JavaScript yang selama bertahun-tahun menjadi standar.

Perbandingan tolok ukur pada aplikasi Next.js berukuran sedang (sekitar 300 modul):

Terser: sekitar 18 detik untuk minifikasi selama next build
Minifier SWC: sekitar 3 detik — kira-kira 6× lebih cepat

Minifikasi SWC juga memahami cakupan dan melakukan eliminasi kode mati (DCE) pada tingkat modul. Jika digabungkan dengan tree-shaking dari bundler, ini berarti ekspor yang tidak digunakan dan mungkin dipertahankan oleh Terser dapat dihapus.

Jika Anda menemukan kasus khusus ketika minifikasi SWC menghasilkan output yang keliru (jarang terjadi, tetapi mungkin), Anda dapat kembali menggunakan Terser:

// next.config.ts — only needed if SWC minifier causes issues
import type { NextConfig } from 'next';

const config: NextConfig = {
  // Explicitly disable SWC minification and fall back to Terser
  swcMinify: false,
};

export default config;

// Alternatively, to tune SWC minification behavior:
// (no direct config exposed yet — SWC minifier config is internal)
// The recommended approach is to leave swcMinify: true (default)
// and report any correctness bugs to the Next.js GitHub repo.

Bundle Analyzer: Memvisualisasikan Hal yang Anda Kirim

Sebelum mengoptimalkan ukuran bundle, Anda perlu melihatnya. Paket @next/bundle-analyzer membungkus webpack-bundle-analyzer dan mengintegrasikannya dengan build Next.js.

Setelah penyiapan selesai, menjalankan ANALYZE=true next build akan membuka treemap interaktif di browser Anda yang menampilkan setiap modul dan kontribusinya pada setiap bagian JS.

Hal yang perlu diperhatikan:

node_modules berukuran besar — misalnya moment.js (>70 KB terkompresi dengan gzip) ketika Anda hanya memerlukan pemformatan tanggal. Gantilah dengan date-fns atau Intl.DateTimeFormat bawaan.
Paket duplikat — dua versi react atau lodash yang muncul dalam treemap menandakan konflik resolusi.
Bagian Server vs Klien — kode yang seharusnya berada di server merembes ke bundle klien (misalnya klien basis data).

Catatan: bundle-analyzer saat ini berfungsi dengan build Webpack (next build tanpa --turbopack). Analyzer native Turbopack sedang direncanakan.

// next.config.ts
import type { NextConfig } from 'next';
import bundleAnalyzer from '@next/bundle-analyzer';

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
});

const config: NextConfig = {
  // ... your other config
};

export default withBundleAnalyzer(config);

// package.json script:
// "analyze": "ANALYZE=true next build"

Konfigurasi Cache Persisten Turbopack

Cache persisten Turbopack menyimpan artefak transformasi dan bundling di .next/cache/turbopack. Pada proses next dev kedua (atau di CI setelah cache dipulihkan), Turbopack membaca dari disk alih-alih menghitung ulang — sehingga waktu mulai dingin untuk pipeline CI berkurang drastis.

Perilaku penting yang perlu dipahami:

Cache ini beralamat berdasarkan konten: kunci cache sebuah file merupakan hash dari kontennya ditambah konten semua dependensinya. Anda tidak akan pernah mendapatkan cache hit yang sudah usang.
Direktori cache dapat membesar seiring waktu. next dev memiliki kebijakan penghapusan LRU bawaan, tetapi Anda dapat menghapusnya secara manual dengan rm -rf .next/cache/turbopack.
Di CI, simpan direktori .next/cache di antara proses. Contoh GitHub Actions:

# .github/workflows/ci.yml (relevant excerpt)
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Restore Next.js cache
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
            ${{ github.workspace }}/.next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.ts','**/*.tsx') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

      - run: npm ci
      - run: npm run build

Mengendalikan Pemisahan Kode dan Strategi Bagian

Next.js secara otomatis memisahkan kode pada tingkat rute (setiap halaman mendapatkan bagian JS sendiri), tetapi Anda dapat memengaruhi pemisahan lebih lanjut dengan dua teknik:

1. Impor dinamis (next/dynamic) — memuat komponen berat secara lambat agar tidak disertakan dalam bundle halaman awal. Ini adalah alat utama untuk mengurangi JS Muatan Pertama.

2. optimizePackageImports — opsi konfigurasi Next.js 15 yang memberi tahu kompiler untuk melakukan tree-shaking pada paket tertentu yang tidak memiliki ekspor ESM yang sesuai. Pustaka seperti lucide-react, @radix-ui/*, dan paket ikon sering memperoleh manfaat dari opsi ini.

Kedua teknik berfungsi dengan Turbopack dan Webpack. optimizePackageImports sangat ampuh karena tidak memerlukan perubahan apa pun pada pernyataan impor Anda — opsi ini semata-mata merupakan petunjuk untuk bundler.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  // Tell the compiler to tree-shake these packages
  // even if they lack proper ESM export maps
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@radix-ui/react-icons',
      'recharts',
      '@heroicons/react',
    ],
  },
};

export default config;

// In your component — no change needed:
// import { ChevronRight, User } from 'lucide-react';
// Only ChevronRight and User are bundled, not the full icon library.

Mengukur Performa Build dengan next build --profile

Ketika waktu build tiba-tiba meningkat, Next.js menyediakan pembuatan profil bawaan untuk menemukan sumber hambatan. Dua flag yang paling berguna adalah:

next build --profile — menghasilkan rekaman profiler React dan file .cpuprofile yang dapat Anda buka di Chrome DevTools untuk melihat transformasi atau plugin mana yang menghabiskan waktu.
NEXT_TELEMETRY_DEBUG=1 next build — mencetak rincian waktu per tahap (kompilasi, pemeriksaan tipe, pembuatan statis, dan sebagainya) ke keluaran standar.

Khusus untuk Turbopack, flag --turbopack menampilkan waktu kompilasi per segmen rute di keluaran terminal. Satu rute yang memerlukan waktu jauh lebih lama sering menunjukkan tidak adanya resolveAlias, sehingga Turbopack harus menelusuri jalur relatif yang dalam pada setiap siklus HMR.

Alur kerja praktis: jalankan dengan pembuatan profil → identifikasi tahap yang paling lambat → terapkan perubahan konfigurasi yang sesuai → ukur kembali. Jangan pernah menebak-nebak pengoptimalan pada bundler yang kompleks.

// scripts/build-perf.ts — a small helper to time build phases
// Run with: npx ts-node scripts/build-perf.ts

import { execSync } from 'child_process';

function timed(label: string, cmd: string): void {
  const start = Date.now();
  console.log(`\n>>> Starting: ${label}`);
  try {
    execSync(cmd, { stdio: 'inherit', env: { ...process.env } });
  } catch {
    console.error(`[FAILED] ${label}`);
    process.exit(1);
  }
  const elapsed = ((Date.now() - start) / 1000).toFixed(2);
  console.log(`<<< Done: ${label} in ${elapsed}s`);
}

timed('Type check', 'npx tsc --noEmit');
timed('Next.js build', 'npx next build');

Uji Pemahaman: Loader Turbopack vs Loader Webpack

Uji pemahaman Anda tentang perbedaan utama antara sistem loader Turbopack dan sistem loader Webpack di Next.js 15.

Jawab di pelajaran interaktif

Ringkasan Pelajaran: Konfigurasi Turbopack dan Kompiler

Dalam pelajaran ini, Anda telah mempelajari seluruh susunan konfigurasi kompiler dan bundler di Next.js 15:

Arsitektur Turbopack — komputasi inkremental, pekerja Rust paralel, dan caching disk persisten membuatnya jauh lebih cepat daripada Webpack untuk alur kerja pengembangan.
Blok konfigurasi turbopack — gunakan rules untuk transformasi tingkat file, resolveAlias untuk pintasan jalur modul, dan selaraskan jalur tsconfig.json agar tidak terjadi ketidaksesuaian tipe dan bundle.
SWC sebagai transformer — berbeda dari Turbopack (bundler), SWC menangani penghapusan TS, JSX, dan minifikasi. Keberadaan .babelrc dalam proyek Anda secara diam-diam menonaktifkan SWC.
Opsi compiler — removeConsole, reactRemoveProperties, dan plugin CSS-in-JS dikonfigurasi pada kunci compiler tingkat teratas, bukan di dalam turbopack.
Analisis bundle — gunakan @next/bundle-analyzer untuk memvisualisasikan komposisi bagian dan menemukan dependensi besar atau kode server yang merembes ke bundle klien.
optimizePackageImports — petunjuk tanpa perubahan kode yang mengaktifkan tree-shaking untuk paket dengan peta ekspor ESM yang buruk.
Caching CI — simpan .next/cache di antara proses untuk memanfaatkan cache persisten Turbopack dan mengurangi waktu build CI secara signifikan.

Model mental utamanya: Turbopack mengelola graf, SWC mengelola file, dan next.config.ts adalah bidang kendali tunggal untuk keduanya.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pendalaman Konfigurasi Turbopack dan Compiler” gratis?

Ya — teks lengkap “Pendalaman Konfigurasi Turbopack dan Compiler” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pendalaman Konfigurasi Turbopack dan Compiler”?

Sesuaikan Turbopack, transformasi, dan compiler berbasis SWC untuk build yang lebih cepat serta keluaran yang lebih kecil. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Pendalaman Konfigurasi Turbopack dan Compiler” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menganalisis dan Mengecilkan Bundel Klien
Pendalaman Konfigurasi Turbopack dan Compiler
Batas Modul dengan server-only dan client-only
Impor Dinamis, Pemisahan Kode, dan Hidrasi Malas

← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)