output

Bir derleme sırasında Next.js, uygulamanızın üretim sürümünü dağıtmak için gereken tüm dosyaları belirlemek üzere her sayfayı ve bağımlılıklarını otomatik olarak izleyecektir.

Bu özellik, dağıtımların boyutunu büyük ölçüde azaltmaya yardımcı olur. Önceden, Docker ile dağıtım yaparken next start adresini çalıştırmak için paketinizin dependencies dizinindeki tüm dosyaların yüklü olması gerekiyordu. Next.js 12 ile başlayarak, yalnızca gerekli dosyaları dahil etmek için .next/ dizinindeki Çıktı Dosyası İzleme özelliğinden yararlanabilirsiniz.

Ayrıca bu, çeşitli sorunlara neden olabilen ve gereksiz çoğaltma yaratan kullanımdan kaldırılmış serverless hedefine olan ihtiyacı da ortadan kaldırır.

How it Works

next build sırasında Next.js şunları kullanacaktır @vercel/nft bir sayfanın yüklenebileceği tüm dosyaları belirlemek için import, require ve fs kullanımını statik olarak analiz etmek.

Next.js'nin üretim sunucusu da .next/next-server.js.nft.json adresinde üretimde yararlanılabilecek gerekli dosyaları ve çıktıları için izlenir.

.next çıktı dizinine yayılan .nft.json dosyalarından yararlanmak için, .nft.json dosyasına göreli olan her izdeki dosyaların listesini okuyabilir ve ardından bunları dağıtım konumunuza kopyalayabilirsiniz.

Automatically Copying Traced Files

Next.js, node_modules adresindeki belirli dosyalar da dahil olmak üzere bir üretim dağıtımı için yalnızca gerekli dosyaları kopyalayan bir standalone klasörünü otomatik olarak oluşturabilir.

Bu otomatik kopyalamadan yararlanmak için next.config.js adresinden etkinleştirebilirsiniz:

next.config.js
module.exports = {
  output: 'standalone',
}

Bu, .next/standalone adresinde bir klasör oluşturacak ve daha sonra node_modules adresini yüklemeden kendi başına dağıtılabilecektir.

Ayrıca, next start yerine kullanılabilecek minimal bir server.js dosyası da çıktı olarak verilir. Bu minimal sunucu, public veya .next/static klasörlerini varsayılan olarak kopyalamaz, çünkü bunlar ideal olarak bir CDN tarafından işlenmelidir, ancak bu klasörler standalone/public ve standalone/.next/static klasörlerine manuel olarak kopyalanabilir, ardından server.js dosyası bunları otomatik olarak sunacaktır.

Bildiğim iyi oldu:

  • next.config.js next build sırasında okunur ve server.js çıktı dosyasına serileştirilir. Eski serverRuntimeConfig veya publicRuntimeConfig seçenekleri kullanılıyorsa, değerler derleme zamanındaki değerlere özgü olacaktır.
  • Projenizin belirli bir bağlantı noktasını veya ana bilgisayar adını dinlemesi gerekiyorsa, server.js adresini çalıştırmadan önce PORT veya HOSTNAME ortam değişkenlerini tanımlayabilirsiniz. Örneğin, sunucuyu http://0.0.0.0:8080 adresinde başlatmak için PORT=8080 HOSTNAME=0.0.0.0 node server.js adresini çalıştırın.
  • Projeniz varsayılan loader ile Görüntü Optimizasyonu kullanıyorsa, sharp adresini bir bağımlılık olarak yüklemeniz gerekir:
Terminal
npm i sharp
Terminal
yarn add sharp
Terminal
pnpm add sharp
Terminal
bun add sharp

Caveats

packages/web-app/next.config.js
module.exports = {
  experimental: {
    // this includes files from the monorepo base two directories up
    outputFileTracingRoot: path.join(__dirname, '../../'),
  },
}
next.config.js
module.exports = {
  experimental: {
    outputFileTracingExcludes: {
      '/api/hello': ['./un-necessary-folder/**/*'],
    },
    outputFileTracingIncludes: {
      '/api/another': ['./necessary-folder/**/*'],
    },
  },
}

Experimental turbotrace

Bağımlılıkların izini sürmek çok karmaşık hesaplamalar ve analizler gerektirdiği için yavaş olabilir. JavaScript uygulamasına daha hızlı ve daha akıllı bir alternatif olarak Rust'ta turbotrace 'u oluşturduk.

Etkinleştirmek için aşağıdaki yapılandırmayı next.config.js adresinize ekleyebilirsiniz:

next.config.js
module.exports = {
  experimental: {
    turbotrace: {
      // control the log level of the turbotrace, default is `error`
      logLevel?:
      | 'bug'
      | 'fatal'
      | 'error'
      | 'warning'
      | 'hint'
      | 'note'
      | 'suggestions'
      | 'info',
      // control if the log of turbotrace should contain the details of the analysis, default is `false`
      logDetail?: boolean
      // show all log messages without limit
      // turbotrace only show 1 log message for each categories by default
      logAll?: boolean
      // control the context directory of the turbotrace
      // files outside of the context directory will not be traced
      // set the `experimental.outputFileTracingRoot` has the same effect
      // if the `experimental.outputFileTracingRoot` and this option are both set, the `experimental.turbotrace.contextDirectory` will be used
      contextDirectory?: string
      // if there is `process.cwd()` expression in your code, you can set this option to tell `turbotrace` the value of `process.cwd()` while tracing.
      // for example the require(process.cwd() + '/package.json') will be traced as require('/path/to/cwd/package.json')
      processCwd?: string
      // control the maximum memory usage of the `turbotrace`, in `MB`, default is `6000`.
      memoryLimit?: number
    },
  },
}