استفاده از قابلیت Static HTML Export

قابلیت Static HTML Export به شما اجازه می‌دهد تا یک وب‌سایت کاملاً استاتیک ایجاد کنید که می‌تواند بدون نیاز به سرور NodeJS اجرا شود. این قابلیت مناسب صفحه‌های landing، وبلاگ‌ها، سامانه‌های خبری و وب‌سایت‌های این‌چنینی هست و از امکانات زیر نیز، پشتیبانی می‌کند:

• Dynamic Routes
• Prefetching
• Preloading JavaScript
• Dynamic Imports
• getStaticProps
• getStaticPaths

برای استفاده از این قابلیت، باید در Local وارد فایل next.config.js شوید و مقدار فیلد output را به شکل زیر، بنویسید:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // distDir: 'dist', // optional, changes the output dir from 'out' to 'dist'
}

module.exports = nextConfig

در ادامه، کافیست تا دستور npm run build را در Local اجرا کنید تا دایرکتوری out یا همان دایرکتوری شامل فایل‌های Static برای‌تان ایجاد شود.

برای استقرار خروجی نهایی برنامه در لیارا، کافیست تا طبق مستندات ساخت برنامه‌های Static یک برنامه static در لیارا ایجاد کنید.

قابلیت بهینه‌سازی عکس به صورت پیش‌فرض به یک سرور NodeJS نیاز دارد و در محیط Static، قابل استفاده نیست. بنابراین باید این قابلیت را در فایل next.config.js به شکل زیر، غیر فعال کنید:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // distDir: 'dist', // optional, changes the output dir from 'out' to 'dist'
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig
}

به صورت کلی، امکاناتی که به یک سرور NodeJS یا یک منطق dynamic که در زمان بیلد برنامه نمی‌تواند پردازش شود؛ نیاز دارند؛ در قابلیت Static HTML Export پشتیبانی نمی‌شوند، نظیر:

• API Routes
• Redirectها
• هدرها
• Middlewareها
• getStaticPaths با fallback:true
• getServerSideProps