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:

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:

• 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:

npm i sharp

yarn add sharp

pnpm add sharp

bun add sharp

Caveats

• Monorepo kurulumlarında izleme yapılırken, varsayılan olarak izleme için proje dizini kullanılır. next build packages/web-app için packages/web-app izleme kökü olacaktır ve bu klasör dışındaki hiçbir dosya dahil edilmeyecektir. Bu klasörün dışındaki dosyaları dahil etmek için experimental.outputFileTracingRoot adresini next.config.js olarak ayarlayabilirsiniz.

module.exports = {
  experimental: {
    // this includes files from the monorepo base two directories up
    outputFileTracingRoot: path.join(__dirname, '../../'),
  },
}

• Next.js'nin gerekli dosyaları dahil etmede başarısız olabileceği veya kullanılmayan dosyaları yanlış bir şekilde dahil edebileceği bazı durumlar vardır. Bu durumlarda, next.config.js adresinde sırasıyla experimental.outputFileTracingExcludes ve experimental.outputFileTracingIncludes adreslerinden yararlanabilirsiniz. Her yapılandırma, belirli sayfalarla eşleşecek anahtar için minimatch globs içeren bir nesneyi ve izlemeye dahil etmek veya hariç tutmak için projenin köküne göre globs içeren bir dizinin değerini kabul eder.

module.exports = {
  experimental: {
    outputFileTracingExcludes: {
      '/api/hello': ['./un-necessary-folder/**/*'],
    },
    outputFileTracingIncludes: {
      '/api/another': ['./necessary-folder/**/*'],
    },
  },
}

• Şu anda Next.js, yayılan .nft.json dosyaları ile hiçbir şey yapmamaktadır. Dosyalar, minimal bir dağıtım oluşturmak için dağıtım platformunuz, örneğin Vercel tarafından okunmalıdır. Gelecekteki bir sürümde, bu .nft.json dosyalarını kullanmak için yeni bir komut planlanmaktadır.

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:

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
    },
  },
}