پلتفرم NextJS

(NextJS Platform)

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

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

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

بیلد متغیر‌های محیطی برای مرورگر

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

قابلیت 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,
    },
  },
}

همچنین اگر شما از Next Image استفاده می‌کنید باید هاست‌های‌تان را در فایل next.config.jsاضافه کنید. برای مثال نمونه کد زیر به تمام هاست‌ها اجازه دسترسی می‌دهد که شما می‌توانید این مورد به صورت دلخواه تغییر بدید.

module.exports = {
  experimental: {
    images: {
      remotePatterns: [
        {
          protocol: "https",
          hostname: "**",
        },
      ],
    },
  },
}

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

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

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

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

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

سپس کد زیر را به فایل next.config.js پروژه‌تان اضافه کنید:

module.exports = {
  // ...
  output: 'standalone',
  // ...
}

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

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

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

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

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 ارائه می شوند. فایل‌های اضافه شده در زمان اجرا، در دسترس نخواهند بود. برای ذخیره‌ی دائمی فایل‌ها، توصیه می‌‌شود از سرویس ذخیره‌ سازی ابری لیارا استفاده کنید.

رفع خطای ECONNRESET

این خطا به دلیل رسیدن به حداکثر محدودیت منابع رخ می‌دهد و با ارتقا پلن، رفع می‌شود.

نسخه NodeJS

در نظر داشته باشید که برنامه NextJS با نسخه NodeJS 20 در دسترس قرار می‌گیرد.