Nextjs Package Bundling Transpile Packages Server External Optimize

Definisi

Next.js mengelola bundling dependency lewat opsi seperti transpilePackages (compile ulang paket yang belum ESNext), serverExternalPackages (biarkan dependency tertentu tidak dibundle di server), dan optimasi import. Tujuannya: kompatibilitas + bundle size wajar.

Kapan dipakai

• transpilePackages: saat pakai lib yang masih pakai JSX/TS tapi belum di-build (misal design system internal).
• serverExternalPackages: pakai native module (sharp, sqlite) yang tidak boleh di-bundle di runtime server.
• optimizePackageImports: kurangi waktu compile dengan impor parsial otomatis.

Cara kerja

js

// next.config.js
module.exports = {
  transpilePackages: ['@kirem/ui', 'lodash-es'],
  serverExternalPackages: ['sharp', 'bcrypt'],