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.

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.

Supported Features

Next.js'nin çekirdeği statik dışa aktarımları desteklemek üzere tasarlanmıştır.

Server Components

Statik bir dışa aktarma oluşturmak için next build adresini çalıştırdığınızda, app dizini içinde tüketilen Sunucu Bileşenleri, geleneksel statik site oluşturmaya benzer şekilde derleme sırasında çalışacaktır.

Ortaya çıkan bileşen, ilk sayfa yüklemesi için statik HTML'ye ve rotalar arasında istemci gezintisi için statik bir yüke dönüştürülecektir. Dinamik sunucu işlevlerini kullanmadıkları sürece, statik dışa aktarmayı kullanırken Sunucu Bileşenleriniz için hiçbir değişiklik gerekmez.

export default async function Page() {
  // This fetch will run on the server during `next build`
  const res = await fetch('https://api.example.com/...')
  const data = await res.json()
 
  return <main>...</main>
}

Client Components

İstemcide veri getirme işlemini gerçekleştirmek istiyorsanız, istekleri memoize etmek için SWR ile bir İstemci Bileşeni kullanabilirsiniz.

'use client'
 
import useSWR from 'swr'
 
const fetcher = (url: string) => fetch(url).then((r) => r.json())
 
export default function Page() {
  const { data, error } = useSWR(
    `https://jsonplaceholder.typicode.com/posts/1`,
    fetcher
  )
  if (error) return 'Failed to load'
  if (!data) return 'Loading...'
 
  return data.title
}

Rota geçişleri istemci tarafında gerçekleştiğinden, bu geleneksel bir SPA gibi davranır. Örneğin, aşağıdaki dizin rotası istemcide farklı gönderilere gitmenizi sağlar:

import Link from 'next/link'
 
export default function Page() {
  return (
    <>
      <h1>Index Page</h1>
      <hr />
      <ul>
        <li>
          <Link href="/post/1">Post 1</Link>
        </li>
        <li>
          <Link href="/post/2">Post 2</Link>
        </li>
      </ul>
    </>
  )
}

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

Route Handlers

Route Handlers, next build çalıştırıldığında statik bir yanıt oluşturacaktır. Yalnızca GET HTTP fiili desteklenir. Bu, önbelleğe alınmış veya önbelleğe alınmamış verilerden statik HTML, JSON, TXT veya diğer dosyaları oluşturmak için kullanılabilir. Örneğin:

export async function GET() {
  return Response.json({ name: 'Lee' })
}

Yukarıdaki app/data.json/route.ts dosyası, next build sırasında statik bir dosyaya dönüştürülecek ve { name: 'Lee' } içeren data.json üretilecektir.

Gelen istekten dinamik değerleri okumanız gerekiyorsa, statik bir dışa aktarma kullanamazsınız.

Browser APIs

İstemci Bileşenleri next build sırasında HTML'ye önceden işlenir. window , localStorage ve navigator gibi Web API 'leri sunucuda mevcut olmadığından, bu API'lere yalnızca tarayıcıda çalışırken güvenli bir şekilde erişmeniz gerekir. Örneğin:

'use client';
 
import { useEffect } from 'react';
 
export default function ClientComponent() {
  useEffect(() => {
    // You now have access to `window`
    console.log(window.innerHeight);
  }, [])
 
  return ...;
}

Unsupported Features

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

• Dinamik Rotalar ile dynamicParams: true
• Dinamik Rotalar olmadan generateStaticParams()
• İstek'e dayanan Rota İşleyicileri
• Çerezler
• 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

Bu özelliklerden herhangi birini next dev ile kullanmaya çalışmak, aşağıdaki ayarlara benzer bir hatayla sonuçlanacaktır dynamic seçeneğini kök düzende error olarak değiştirin.

export const dynamic = 'error'

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