next

پلتفرم NextJS

(NextJS Platform)

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

ویدیوی آموزشی استقرار با مرورگر

در صورتی که تمایلی به خواندن آموزش متنی ندارید می‌توانید ویدیوی آموزشی زیر ‌را مشاهده کنید.

پروژه و کدهای مورد استفاده در ویدیوی فوق در اینجا قابل مشاهده و دسترسی هستند.

پنج گام استقرار برنامه با مرورگر

توجه داشته باشید؛ تنها برنامه‌هایی که باcreate-next-appساخته شده باشند، در پلتفرم Next لیارا قابل اجرا خواهند بود.

گام اول) کافیست به بخش ایجاد برنامه‌ها در لیارا بروید و با انتخاب پلتفرم NextJS و نوشتن شناسه برنامه‌ی موردنظرتان و در نهایت انتخاب پلن، برنامه خود را ایجاد کنید. برای نمونه، ما در این آموزش برای برنامه آزمایشی‌مان، شناسه nextjs-starter را انتخاب کردیم.

گام دوم) داخل فایلpackage.jsonیک فیلد با نامscriptsوجود دارد. شما باید حتما یک اسکریپت در این بخش با نامstartتعریف کنید.

{
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
    },
      "dependencies": {
        "next": "^11.1.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
      }
}

بعد از این‌که برنامه‌ی شما آپلود شد، لیارا برای شما دستورnpm startرا اجرا می‌کند. شما باید داخل این اسکریپت، دستوری بنویسید که باعث اجرا شدن برنامه‌ی‌تان شود. قرار دهید. (مانند نمونه‌ی بالا)

توجه داشته باشید که اگر اسکریپت build را در فایل package.json خود تعریف کرده باشید، لیارا به‌طور خودکار در فرایند استقرار برنامه‌های NextJS دستور npm run build را اجرا می‌کند.

گام سوم) در این گام، بایستی پوشه پروژه خود را حتماً درون یک فایل با فرمت zipقرار دهید؛ سپس فایل zip را کشیده و در مرورگر رها کنید؛ یا می‌توانید بر روی گزینه انتخاب فایل کلیک کرده و فایل zip مد نظر خود را انتخاب کنید.

گام چهارم) پس از اینکه فایل zip پروژه‌تان به صورت کامل در لیارا آپلود شد، به صفحه جدیدی هدایت می‌شوید؛ در این صفحه در ابتدا، باید پورتی را وارد کنید که برنامه‌تان در آن به درخواست کاربران listen می‌کند یا اصطلاحاً گوش می‌دهد. به عنوان مثال، اگر در لوکال، برنامه شما در پورت 3000 اجرا می‌شود، باید عدد 3000 را در بخش پورت وارد کنید. بعد از انتخاب پورت، کافیست تا بخش‌های زیر را نیز بر اساس نیازهای برنامه خود، تنظیم کنید:

  • تنظیمات دیسک‌ها: اگر که در برنامه خود، دیسک تعریف کردید؛ می‌توانید در این بخش، آن را به برنامه خود متصل کنید.
  • تنظیمات پلتفرم: لیارا به صورت خودکار در فایل next.config.js تغییراتی را ایجاد می‌کند. در صورتی که برنامه‌ی شما با این تغییرات ناسازگار است، لازم است که فیلد output: 'standalone'را به فایل مذکور اضافه کرده و گزینه جلوگیری از اعمال تغییرات در فایل next.config.js در این بخش را نیز غیر فعال کنید.
  • تنظیمات build: در این بخش می‌توانید موقعیت build برنامه خود را مشخص کنید.

گام پنجم و پایانی) در نهایت، کافیست که بر روی گزینه شروع عملیات استقرار کلیک کنید تا استقرار برنامه‌تان آغاز شود

برنامه‌ی شما حتما باید دارای فایلpackage.json باشد تا بتواند در لیارا مستقر شود.
لیارا به صورت خودکار پکیج‌هایی که در فایلpackage.jsonلیست شده‌اند را برای شما نصب می‌کند. پس نیازی ندارید که به دنبال اجرای دستورnpm installباشید. از آن‌جایی که اجرای این دستور زمان‌بر است، برای سرعت بیشتر، این دستور را روی سرورهای قدرتمندمان اجرا می‌کنیم تا زمان زیادی را منتظر نمانید.

بعد از انجام گام‌های قبلی، لیارا به برنامه شما یک زیردامنه رایگان اختصاص می‌دهد که به وسیله آن می‌توانید مطمئن شوید که برنامه‌ی‌تان به صورت صحیح به بستر لیارا منتقل شده است یا خیر. این آدرس بر اساس شناسه برنامه‌ی شما است، برای نمونه:

https://nextjs-starter.liara.run

متوجه شدم، برو گام بعدی!
;