استقرار (deploy) Next js روی Github pages

استقرار (deploy) Next js روی Github pages

خب اول کار نیاز هست این دو مورد رو توضیح بدم که بدونید داستان از چه قراره :

سرویس گیت هاب پیجز (Github pages) یه سرویس رایگان برای میزبانی فایل های استاتیک هست (فقط HTML , CSS و JS) که با انتشار فایل های مورد نظرتون روی یک مخزن (Repository) گیت هاب میتونید از اون استفاده کنید . خوب همون طور که گفتم استایک هست و شما با سروری سروکار ندارید بنابراین کدهاتون باید به شکلی باشه که نیازی نباشه کل اون یا بخشی ازشون روی وب سرور اجرا بشه.

( مثلا کد های PHP که نیاز هست وب سرور Apache او رو اجرا کنه و بعد به شما نتیجه رو بده که خروجی رو نمایش بدید )

خب حالا نکست جی اس چی (Next js) هست ؟ یه متافریم ورک (فریم ورکی که بر اساس یه فریم ورک دیگه ساخته شده - توی این مورد بر اساس ریکت ) هست که وظایف اصلیش PreRendering و Code splitting و Static Build هست . ما اینجا با مورد آخرش کار داریم که از نسخه 9.3 به اسم Static Site Generation یا SSG به نکست اضاف شده . کارش هم این هست که میاد و صفحات استاتیک اَپ شما رو بر اساس کد های ریکتی که زدید میسازه . بعدش می تونید فایل ها رو روی گیت هاب پیجز , Netlify یا سرویس های دیگه آپلود کنید .

گمونم توضیحات کافی باشه و بریم سر اصل مطلب :

مرحله اول

کد زیر رو به اسکریپ های فایل package.json اضاف کنید .

"build:ssg": "next build && next export"

اسکریپت رو توی ترمینال اجرا کنید

npm run build:ssg 

البته مستقیم هم میتونید کد اول رو اجرا کنید ولی چون قراره خیلی ازش استفاده کنید یه بار تعریفش کنید کارتون راحت تر میشه

چند دقیقه صبر کنید تا build SSG شما آماده بشه . بعد از آماده شدنش یه پوشه جدید به اسم out ایجاد میشه که خروجی فایل های استاتیک شما هست .

مرحله دوم

توی این فولد out نیاز داریم که یه فایل بدون نام و فقط پا پسوند .nojekyll ایجاد کنیم وظیفه این فایل اینکه به گیت هاب میگه که تمایلی به استفاده از jekyll برای انتشار فایل هام توسطش ندارم .

اگر از دامین اختصاصی هم دارید استفاده می کنید یادتون نره که فایل .CNAME که حاوی آدرس دامین تون هست رو داخل همین فولدر بزارید

مرحله سوم

الان همه چیز آماده انشار هست و میتونید با با دستورات زیر کد پروژه روی یک مخزن گیت هاب ببرید

git init
git add .
git commit -m "Initial commit " 
git remote add origin < YOUR REMOTE NAME > 
git push -u origin master 

لینک های مرتبط

اگر هم با گیت هاب پیجز کار نکردید می توانید لینک زیر رو یه بررسی کنید که مربوط به مستندات خودش هست .خیلی تر تمیز توضیح داده و کارتون رو راه میندازه.

:: راهنمای استفاده از Github pages