Deploying

Tebrikler, üretime gönderme zamanı geldi.

Yönetilen Next.js'yi Vercel ile dağıtabilir veya bir Node.js sunucusu, Docker görüntüsü veya hatta statik HTML dosyaları üzerinde kendi kendinize barındırabilirsiniz. next start adresini kullanarak dağıtım yaparken tüm Next.js özellikleri desteklenir.

Production Builds

next build çalıştırıldığında uygulamanızın üretim için optimize edilmiş bir sürümü oluşturulur. HTML, CSS ve JavaScript dosyaları sayfalarınıza göre oluşturulur. En iyi performansı elde etmek ve tüm modern tarayıcıları desteklemek için JavaScript derlenir ve tarayıcı paketleri Next.js Derleyicisi kullanılarak küçültülür.

Next.js, yönetilen ve kendi kendine barındırılan Next.js tarafından kullanılan standart bir dağıtım çıktısı üretir. Bu, tüm özelliklerin her iki dağıtım yönteminde de desteklenmesini sağlar. Bir sonraki ana sürümde, bu çıktıyı Build Output API spesifikasyonumuza dönüştüreceğiz .

Managed Next.js with Vercel

Next.js'nin yaratıcıları ve sürdürücüleri olan Vercel, Next.js uygulamalarınız için yönetilen bir altyapı ve geliştirici deneyimi platformu sağlar.

Vercel'e dağıtmak sıfır yapılandırmadır ve küresel olarak ölçeklenebilirlik, kullanılabilirlik ve performans için ek geliştirmeler sağlar. Bununla birlikte, tüm Next.js özellikleri kendi kendine barındırıldığında hala desteklenmektedir.

Vercel adresinden Next.js hakkında daha fazla bilgi edinin veya denemek için adresinden ücretsiz bir şablon dağıtın.

Self-Hosting

Next.js'yi üç farklı şekilde kendi kendinize barındırabilirsiniz:

• Bir Node.js sunucusu
• Bir Docker konteyneri
• Statik bir ihracat

Node.js Server

Next.js, Node.js'yi destekleyen herhangi bir barındırma sağlayıcısına dağıtılabilir. package.json adresinizde "build" ve "start" betiklerinin bulunduğundan emin olun:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Ardından, uygulamanızı oluşturmak için npm run build adresini çalıştırın. Son olarak, Node.js sunucusunu başlatmak için npm run start adresini çalıştırın. Bu sunucu tüm Next.js özelliklerini destekler.

Docker Image

Next.js, Docker konteynerlerini destekleyen herhangi bir barındırma sağlayıcısına dağıtılabilir. Bu yaklaşımı Kubernetes gibi konteyner orkestratörlerine konuşlandırırken veya herhangi bir bulut sağlayıcısında bir konteyner içinde çalıştırırken kullanabilirsiniz.

1. Docker'u makinenize yükleyin
2. Örneğimizi klonlayın(veya çoklu ortam örneği )
3. Konteynerinizi oluşturun: docker build -t nextjs-docker .
4. Konteynerinizi çalıştırın: docker run -p 3000:3000 nextjs-docker

Docker aracılığıyla Next.js, tüm Next.js özelliklerini destekler.

Static HTML Export

Next.js, statik bir site veya Tek Sayfalık Uygulama (SPA) olarak başlamayı ve daha sonra isteğe bağlı olarak sunucu gerektiren özellikleri kullanmak için yükseltmeyi sağlar.

Next.js bu statik dışa aktarmayı desteklediğinden, HTML/CSS/JS statik varlıklarını sunabilen herhangi bir web sunucusunda dağıtılabilir ve barındırılabilir. Buna AWS S3, Nginx veya Apache gibi araçlar da dahildir.

Statik dışa aktarma olarak çalıştırma, sunucu gerektiren Next.js özelliklerini desteklemez. Daha fazla bilgi edinin.

Bilmekte fayda var:

• Sunucu Bileşenleri statik dışa aktarımlarla desteklenir.

Features

Image Optimization

next/image aracılığıyla Görüntü Optimizasyonu, next start kullanılarak dağıtılırken sıfır yapılandırmayla kendi kendine barındırılır. Görüntüleri optimize etmek için ayrı bir hizmet kullanmayı tercih ederseniz, bir görüntü yükleyici yapılandırabilirsiniz.

Görüntü Optimizasyonu, next.config.js adresinde özel bir görüntü yükleyici tanımlanarak statik bir dışa aktarma ile kullanılabilir. Görüntülerin derleme sırasında değil, çalışma zamanında optimize edildiğini unutmayın.

Bilmekte fayda var:

• Kendi kendinize barındırma yaparken, üretim ortamınızda daha performanslı Görüntü Optimizasyonu için proje dizininizde npm install sharp adresini çalıştırarak sharp adresini yüklemeyi düşünün. Linux platformlarında, sharp aşırı bellek kullanımını önlemek için ek yapılandırmagerektirebilir.
• Optimize edilmiş görüntülerin önbelleğe alma davranışıve TTL'nin nasıl yapılandırılacağı hakkında daha fazla bilgi edinin.
• İsterseniz Görüntü Optimizasyonunu devre dışı bırakabilir ve next/image kullanmanın diğer avantajlarından yararlanmaya devam edebilirsiniz. Örneğin, görüntüleri kendiniz ayrı olarak optimize ediyorsanız.

Middleware

Ara yazılım, next start kullanılarak dağıtılırken sıfır yapılandırma ile kendi kendine barındırılır. Gelen talebe erişim gerektirdiğinden, statik bir dışa aktarma kullanıldığında desteklenmez.

Middleware, uygulamanızdaki her rotanın veya varlığın önünde çalışabileceğinden, düşük gecikme süresi sağlamaya yardımcı olmak için mevcut tüm Node.js API'lerinin bir alt kümesi olan bir çalışma zamanı kullanır. Bu çalışma zamanı "uçta" çalışmayı gerektirmez ve tek bölgeli bir sunucuda çalışır. Middleware'i birden fazla bölgede çalıştırmak için ek yapılandırma ve altyapı gereklidir.

Tüm Node.js API'lerini gerektiren bir mantık eklemek (veya harici bir paket kullanmak) istiyorsanız, bu mantığı bir Sunucu Bileşeni olarak bir düzene taşıyabilirsiniz. Örneğin, başlıkları kontrol etme ve yeniden yönlendirme. Ayrıca next.config.js üzerinden yeniden yönlendirmek veya yeniden yazmak için başlıkları, çerezleri veya sorgu parametrelerini de kullanabilirsiniz. Bu işe yaramazsa, özel bir sunucu da kullanabilirsiniz.

Environment Variables

Next.js hem derleme zamanı hem de çalışma zamanı ortam değişkenlerini destekleyebilir.

Varsayılan olarak, ortam değişkenleri yalnızca sunucuda kullanılabilir. Bir ortam değişkenini tarayıcıya göstermek için, önüne NEXT_PUBLIC_ eklenmelidir. Ancak, bu genel ortam değişkenleri next build sırasında JavaScript paketinde satır içine alınacaktır.

Çalışma zamanı ortam değişkenlerini okumak için getServerSideProps adresini kullanmanızı veya App Router'ı aşamalı olarak benimsemenizi öneririz. App Router ile dinamik işleme sırasında sunucudaki ortam değişkenlerini güvenle okuyabiliriz. Bu, farklı değerlere sahip birden fazla ortam aracılığıyla yükseltilebilen tekil bir Docker görüntüsü kullanmanıza olanak tanır.

import { unstable_noStore as noStore } from 'next/cache';
 
export default function Component() {
  noStore();
  // cookies(), headers(), and other dynamic functions
  // will also opt into dynamic rendering, making
  // this env variable is evaluated at runtime
  const value = process.env.MY_VALUE
  ...
}

Bilmekte fayda var:

• register işlevini kullanarak sunucu başlangıcında kod çalıştırabilirsiniz.
• Bağımsız çıktı modunda çalışmadığı için runtimeConfig seçeneğinin kullanılmasını önermiyoruz. Bunun yerine, App Router'ı aşamalı olarak benimsemenizi öneririz.

Caching and ISR

Next.js yanıtları, oluşturulan statik sayfaları, derleme çıktılarını ve görüntüler, yazı tipleri ve komut dosyaları gibi diğer statik varlıkları önbelleğe alabilir.

Sayfaları önbelleğe alma ve yeniden doğrulama (Artımlı Statik Yenileme (ISR) veya App Router'daki daha yeni işlevleri kullanarak) aynı paylaşılan önbelleği kullanır. Varsayılan olarak, bu önbellek Next.js sunucunuzdaki dosya sisteminde (diskte) saklanır. Bu, hem Sayfalar hem de Uygulama Yönlendirici kullanılarak kendi kendine barındırma yapıldığında otomatik olarak çalışır.

Önbelleğe alınan sayfaları ve verileri dayanıklı depolama alanında kalıcı hale getirmek veya önbelleği Next.js uygulamanızın birden fazla kapsayıcısı veya örneği arasında paylaşmak istiyorsanız Next.js önbellek konumunu yapılandırabilirsiniz.

Automatic Caching

• Next.js, public, max-age=31536000, immutable adresinin Cache-Control başlığını gerçekten değişmez varlıklara ayarlar. Geçersiz kılınamaz. Bu değişmez dosyalar dosya adında bir SHA-hash içerir, böylece süresiz olarak güvenli bir şekilde önbelleğe alınabilirler. Örneğin, Statik Görüntü İçe Aktarımları. Görüntüler için TTL'yi yapılandırabilirsiniz.
• Artımlı Statik Yenileme (ISR) s-maxage: <revalidate in getStaticProps>, stale-while-revalidate adresinin Cache-Control başlığını ayarlar. Bu yeniden doğrulama süresi getStaticProps işlevinizdesaniye cinsinden tanımlanır. revalidate: false adresini ayarlarsanız, varsayılan olarak bir yıllık önbellek süresi belirlenir.
• Dinamik olarak oluşturulan sayfalar, kullanıcıya özel verilerin önbelleğe alınmasını önlemek için private, no-cache, no-store, max-age=0, must-revalidate şeklinde bir Cache-Control başlığı ayarlar. Bu hem Uygulama Yönlendirici hem de Sayfa Yönlendirici için geçerlidir. Buna Taslak Modu da dahildir.

Static Assets

Statik varlıkları farklı bir etki alanında veya CDN'de barındırmak istiyorsanız, next.config.js adresindeki assetPrefix yapılandırmasını kullanabilirsiniz. Next.js, JavaScript veya CSS dosyalarını alırken bu varlık önekini kullanacaktır. Varlıklarınızı farklı bir etki alanına ayırmanın dezavantajı, DNS ve TLS çözümlemesi için fazladan zaman harcanmasıdır.

assetPrefix hakkında daha fazla bilgi edinin.

Configuring Caching

Varsayılan olarak, oluşturulan önbellek varlıkları bellekte (varsayılan olarak 50mb) ve diskte depolanacaktır. Next.js'yi Kubernetes gibi bir konteyner düzenleme platformu kullanarak barındırıyorsanız, her pod önbelleğin bir kopyasına sahip olacaktır. Önbellek varsayılan olarak podlar arasında paylaşılmadığından eski verilerin gösterilmesini önlemek için Next.js önbelleğini bir önbellek işleyicisi sağlayacak ve bellek içi önbelleği devre dışı bırakacak şekilde yapılandırabilirsiniz.

Kendi kendini barındırırken ISR/Veri Önbelleği konumunu yapılandırmak için next.config.js dosyanızda özel bir işleyici yapılandırabilirsiniz:

module.exports = {
  experimental: {
    incrementalCacheHandlerPath: require.resolve('./cache-handler.js'),
    isrMemoryCacheSize: 0, // disable default in-memory caching
  },
}

Ardından, örneğin projenizin kök dizininde cache-handler.js adresini oluşturun:

const cache = new Map()
 
module.exports = class CacheHandler {
  constructor(options) {
    this.options = options
  }
 
  async get(key) {
    // This could be stored anywhere, like durable storage
    return cache.get(key)
  }
 
  async set(key, data, ctx) {
    // This could be stored anywhere, like durable storage
    cache.set(key, {
      value: data,
      lastModified: Date.now(),
      tags: ctx.tags,
    })
  }
 
  async revalidateTag(tag) {
    // Iterate over all entries in the cache
    for (let [key, value] of cache) {
      // If the value's tags include the specified tag, delete this entry
      if (value.tags.includes(tag)) {
        cache.delete(key)
      }
    }
  }
}

Özel bir önbellek işleyicisi kullanmak, Next.js uygulamanızı barındıran tüm pod'lar arasında tutarlılık sağlamanıza olanak tanır. Örneğin, önbelleğe alınan değerleri Redis veya AWS S3 gibi herhangi bir yere kaydedebilirsiniz.

Bilmekte fayda var:

• revalidatePath önbellek etiketlerinin üstünde bir kolaylık katmanıdır. revalidatePath çağrısı, sağlanan sayfa için özel bir varsayılan etiketle revalidateTag işlevini çağıracaktır.

Build Cache

Next.js, uygulamanızın hangi sürümünün sunulduğunu belirlemek için next build sırasında bir kimlik oluşturur. Aynı yapı kullanılmalı ve birden fazla kapsayıcı önyüklenmelidir.

Ortamınızın her aşaması için yeniden oluşturuyorsanız, kapsayıcılar arasında kullanmak üzere tutarlı bir derleme kimliği oluşturmanız gerekecektir. next.config.js adresindeki generateBuildId komutunu kullanın:

module.exports = {
  generateBuildId: async () => {
    // This could be anything, using the latest git hash
    return process.env.GIT_HASH
  },
}

Version Skew

Next.js, sürüm çarp ıklığının çoğu örneğini otomatik olarak azaltacak ve algılandığında yeni varlıkları almak için uygulamayı otomatik olarak yeniden yükleyecektir. Örneğin, derleme kimliğinde bir uyumsuzluk varsa, sayfalar arasındaki geçişler önceden hazırlanmış bir değer kullanmak yerine zor bir gezinme gerçekleştirecektir.

Uygulama yeniden yüklendiğinde, sayfa gezintileri arasında kalıcı olacak şekilde tasarlanmamışsa uygulama durumu kaybı olabilir. Örneğin, URL durumu veya yerel depolama alanı kullanmak, sayfa yenilendikten sonra durumu kalıcı hale getirecektir. Ancak, useState gibi bileşen durumları bu tür gezinmelerde kaybolacaktır.

Vercel, yeni derleme dağıtılırken önceki derlemedeki varlıkların ve işlevlerin hala kullanılabilir olmasını sağlamak için Next.js uygulamaları için ek çarpıklık koruması sağlar.

Manual Graceful Shutdowns

Kendi kendine barındırma yaparken, sunucu SIGTERM veya SIGINT sinyallerinde kapandığında kod çalıştırmak isteyebilirsiniz.

NEXT_MANUAL_SIG_HANDLE env değişkenini true olarak ayarlayabilir ve ardından _document.js dosyanızın içinde bu sinyal için bir işleyici kaydedebilirsiniz. Ortam değişkenini .env dosyasına değil, doğrudan package.json betiğine kaydetmeniz gerekecektir.

Bilmekte fayda var: Manuel sinyal işleme next dev adresinde mevcut değildir.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: cleaning up')
    process.exit(0)
  })
  process.on('SIGINT', () => {
    console.log('Received SIGINT: cleaning up')
    process.exit(0)
  })
}