پلتفرم NextJS

(NextJS Platform)

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

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

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

نحوه‌ی استفاده از متغیرهای 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
  }
}

رفع خطای 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