Static Exports

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, next build adresini çalıştırırken her rota için bir HTML dosyası oluşturur. Next.js, katı bir SPA'yı ayrı HTML dosyalarına bölerek istemci tarafında gereksiz JavaScript kodlarının yüklenmesini önleyebilir, paket boyutunu küçültebilir ve sayfanın daha hızlı yüklenmesini sağlayabilir.

Next.js bu statik dışa aktarımı desteklediğinden, HTML/CSS/JS statik varlıklarını sunabilen herhangi bir web sunucusunda dağıtılabilir ve barındırılabilir.

Bilmekte fayda var: Gelişmiş statik dışa aktarma desteği için App Router'ı kullanmanızı öneririz.

Configuration

Statik dışa aktarımı etkinleştirmek için next.config.js adresindeki çıktı modunu değiştirin:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

next build çalıştırıldıktan sonra Next.js, uygulamanız için HTML/CSS/JS varlıklarını içeren bir out klasörü oluşturacaktır.

Kullanabilirsiniz getStaticProps ve getStaticPathspages dizininizdeki her sayfa için bir HTML dosyası oluşturmak için (veya dinamik rotalar için daha fazla).

Supported Features

Statik bir site oluşturmak için gereken temel Next.js özelliklerinin çoğu desteklenmektedir:

• Dinamik Rotalar kullanılırken getStaticPaths
• İle ön getirme next/link
• JavaScript Ön Yükleme
• Dinamik İthalat
• Herhangi bir stil seçeneği (örn. CSS Modülleri, styled-jsx)
• İstemci taraflı veri getirme
• getStaticProps
• getStaticPaths

Image Optimization

next/image aracılığıyla 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. Örneğin, Cloudinary gibi bir hizmetle görüntüleri optimize edebilirsiniz:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './my-loader.ts',
  },
}
 
module.exports = nextConfig

Bu özel yükleyici, görüntülerin uzak bir kaynaktan nasıl alınacağını tanımlayacaktır. Örneğin, aşağıdaki yükleyici Cloudinary için URL oluşturacaktır:

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

Daha sonra Cloudinary'deki görüntüye göreli yollar tanımlayarak uygulamanızda next/image adresini kullanabilirsiniz:

import Image from 'next/image'
 
export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

Unsupported Features

Node.js sunucusu gerektiren özellikler veya derleme işlemi sırasında hesaplanamayan dinamik mantık desteklenmez:

• Uluslararasılaştırılmış Yönlendirme
• API Rotaları
• Yeniden Yazma
• Yönlendirmeler
• Başlıklar
• Orta Yazılım
• Artımlı Statik Rejenerasyon
• Varsayılan ile Görüntü Optimizasyonu loader
• Taslak Modu
• getStaticPaths ile fallback: true
• getStaticPaths ile fallback: 'blocking'
• getServerSideProps

Deploying

Statik bir dışa aktarma ile Next.js, HTML/CSS/JS statik varlıkları sunabilen herhangi bir web sunucusunda dağıtılabilir ve barındırılabilir.

next build çalıştırıldığında, Next.js statik dışa aktarımı out klasörüne oluşturur. Örneğin, aşağıdaki rotalara sahip olduğunuzu varsayalım:

• /
• /blog/[id]

next build çalıştırıldıktan sonra Next.js aşağıdaki dosyaları oluşturacaktır:

• /out/index.html
• /out/404.html
• /out/blog/post-1.html
• /out/blog/post-2.html

Nginx gibi statik bir ana bilgisayar kullanıyorsanız, gelen isteklerden doğru dosyalara yeniden yazmaları yapılandırabilirsiniz:

server {
  listen 80;
  server_name acme.com;
 
  root /var/www/out;
 
  location / {
      try_files $uri $uri.html $uri/ =404;
  }
 
  # This is necessary when `trailingSlash: false`.
  # You can omit this when `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }
 
  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

Version History