پلتفرم NextJS

(NextJS Platform)

🎯 توضیحات و نکات تکمیلی

فهرست عناوین:

• نحوه‌ی استفاده از متغیرهای NEXT_PUBLIC
• قابلیت Static HTML Export
• جلوگیری از اعمال تغییرات در فایل next.config.js
• افزایش فضای مسیر Cache
• استفاده از قابلیت ISR
• رفع خطای CORS
• Static Assets

نحوه‌ی استفاده از متغیرهای NEXT_PUBLIC

با اضافه شدن قابلیت لود متغیرهای محیطی از فایل env به برنامه‌های NextJS، این امکان فراهم شده تا با قرار دادن پیشوند NEXT_PUBLIC_ برای متغیرها، در سمت مرورگر نیز به متغیرهای محیطی دسترسی پیدا کنید. برای تعریف و استفاده از متغیرهای NEXT_PUBLIC در لیارا باید یک فایل با نام .env.production در مسیر اصلی پروژه‌ی خود تعریف کنید و متغیرهای مورد نظر خود را در این فایل مقداردهی کنید.

قابلیت Static HTML Export

قابلیت Static HTML Export این امکان را فراهم کرده تا شما از برنامه‌های NextJS خود، خروجی static HTML بگیرید و دیگر نیازی به سرور NodeJS نخواهید داشت. همچنین خروجی نهایی تقریبا از تمام ویژگی‌های ارائه شده در NextJS مانند dynamic routes، prefetching، preloading و dynamic imports پشتیبانی می‌کند اما این روش مناسب صفحه‌های لندینگ، وبلاگ‌ها، سامانه‌های خبری و وبسایت‌های مشابه است زیرا باید داده‌های وبسایت در زمان build در دسترس باشند.

برای استفاده از این قابلیت باید اسکریپت build برنامه‌ی خود را در فایل package.json به‌شکل زیر ویرایش کنید:

"scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
},

همچنین توجه داشته باشید در زمان استفاده از قابلیت Static HTML Export، امکان بهینه‌سازی تصاویر وجود ندارد بنابراین باید قابلیت بهینه‌سازی تصاویر را در فایل next.config.js غیرفعال کنید:

module.exports = {
  experimental: {
    images: {
      unoptimized: true,
    },
  },
}

درنهایت دستور npm run build را اجرا کنید تا خروجی‌های نهایی در مسیر پیش‌فرض out قرار بگیرند.

حال برای استقرار خروجی نهایی در لیارا کافیست که یک برنامه‌ی Static در پنل کاربری خود ایجاد کرده و برنامه‌ی خود را با اجرای دستور liara deploy --path out بر روی لیارا مستقر کنید.

جلوگیری از اعمال تغییرات در فایل next.config.js

لیارا به‌صورت خودکار فایلnext.config.jsبرنامه‌ی شما را پیدا کرده و در این فایل، تنظیماتی را اضافه می‌کند تا برنامه برای اجرا آماده شود. چنانچه قصد جلوگیری از اعمال این تغییرات را دارید، باید فایل liara.json زیر را به‌ریشه‌ی برنامه‌ی‌تان اضافه کنید:

{
  "next": {
    "modifyConfig": false
  }
}

افزایش فضای مسیر Cache

فریم‌ورک Next.js به‌صورت پیش‌فرض فایل‌های کش (Cache) را در مسیر.next/cacheذخیره می‌کند. در لیارا به‌دلیل ReadOnly بودن فایل سیستم این مسیر قابل نوشتن نیست. به‌همین دلیل این مسیر به مسیر/tmpلینک شده است./tmpدر فایل‌سیستم هر برنامه، قابل نوشتن است و درواقع ReadOnly نیست، اما محدودیت ۱۰۰ مگابایتی دارد. این محدودیت به‌این معناست که اگر حجم فایل‌های کش شما بزرگ‌تر از ۱۰۰ مگابایت باشد، با خطا مواجه خواهید شد. برای رفع این محدودیت، می‌توانید از قابلیت دیسک‌ها استفاده کنید و دیسکی با اندازه‌ی دلخواه‌تان بسازید و به‌پوشه‌ی/tmpمتصل کنید.

استفاده از قابلیت ISR

برای استفاده از قابلیت ISR فریم‌ورک Next.js در پلتفرم لیارا نیاز است به مسیری که صفحات ساخته شده در آن ذخیره می‌شوند، دیسک مونت کنید. چرا که فایل سیستم لیارا ReadOnly است و امکان نوشتن در آن مسیر به‌صورت پیش‌فرض وجود ندارد.
اگر از مسیر pages برای ساخت صفحات استفاده می‌کنید، نیاز است دیسک را به مسیر .next/server/pages مونت کنید. ولی در صورت استفاده از مسیر app نیاز است دیسک را به مسیر .next/server/app مونت کنید.

رفع خطای CORS

با وجود انواع مختلف فریم‌ورک‌ها، برای رفع خطای CORS راه حل‌های متفاوتی وجود دارد. برای مثال در فریم‌ورک NextJS باید طبق مستندات رسمی این فریم‌ورک، پکیج cors را نصب کرده:

$ npm i cors

و به‌شکل زیر از آن در برنامه‌ی خود استفاده کنید:

import Cors from 'cors'

// Initializing the cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // Run the middleware
  await runMiddleware(req, res, cors)

  // Rest of the API logic
  res.json({ message: 'Hello Everyone!' })
}

export default handler

Static Assets

در Next.js می‌توانید فایل‌های استاتیک مانند تصاویر را در یک پوشه به نامpublic در مسیر اصلی پروژه قرار دهید. سپس فایل‌های موجود در مسیرpublic از طریق روت دامنه با شروع از (/) در دسترس هستند. برای مثال اگر شما یک فایل به نام example.png در پوشه‌ی public داشته باشید، می‌توانید طبق مسیر زیر به این فایل دسترسی داشته باشید:

https://yourdomain.com/example.png

برای دسترسی به فایل example.png در سورس‌کد:

import Image from 'next/image'

export function Example() {
  return <Image src="/example.png" width="64" height="64" />
}

پوشه public برای robots.txt ،favicon.ico ،Google Site Verification مفید است. نام این پوشه حتما باید public نام‌گذاری شود و نام آن را نمی توان تغییر داد و تنها مسیری است که برای ارائه فایل‌های استاتیک استفاده می شود.

توجه داشته باشید که فقط فایل‌های استاتیکی که در پوشه‌ی public در زمان Build هستند توسط Next.js ارائه می شوند. فایل‌های اضافه شده در زمان اجرا، در دسترس نخواهند بود. برای ذخیره‌ی دائمی فایل‌ها، توصیه می‌‌شود از سرویس ذخیره‌ سازی ابری لیارا استفاده کنید.