استقرار نسخه Next.js

بازگشت به فهرست

این فصل انتشار نسخه Next.js روی هاست را توضیح می‌دهد. برای نسخه HTML به نصب روی هاست بروید.

دو مسیر وجود دارد. اگر مطمئن نیستید، مسیر ۱ (خروجی استاتیک) را انتخاب کنید؛ روی هر هاستی کار می‌کند و به Node.js روی سرور نیاز ندارد.

اول این را بخوانید

فایل out/index.html را با دابل‌کلیک باز نکنید. صفحه بدون استایل و بدون تصویر باز می‌شود و این ایراد بیلد نیست.

آدرس فایل‌ها در خروجی به‌صورت مطلق نوشته می‌شود (/_next/...). وقتی صفحه با پروتکل file:// باز شود، مرورگر دنبال D:/_next/... می‌گردد که وجود ندارد. خروجی استاتیک باید با یک وب‌سرور باز شود:

npm run preview      # http://localhost:3030

روی هاست واقعی این مشکل وجود ندارد، چون فایل‌ها با HTTP سرو می‌شوند.

مسیر ۱: هاست استاتیک

مناسب سی‌پنل، دایرکت‌ادمین، پلسک و هر هاست اشتراکی. خروجی فقط مجموعه‌ای از فایل‌های HTML و CSS و تصویر است.

گام ۱: ساخت خروجی

روی کامپیوتر خودتان:

npm install
npm run build:static

پوشه out/ ساخته می‌شود (حدود ۵۶ مگابایت).

گام ۲: آپلود

محتوای داخل out/ را در public_html بگذارید، نه خود پوشه out را.

1. از محتوای پوشه out/ یک فایل ZIP بسازید
2. در File Manager پنل وارد public_html شوید و ZIP را آپلود کنید
3. روی فایل راست‌کلیک کنید و Extract بزنید
4. فایل ZIP را حذف کنید

هنگام ساخت ZIP دقت کنید فایل .htaccess هم داخلش باشد. در ویندوز نمایش فایل‌های مخفی را از تب View روشن کنید. این فایل را خود بیلد می‌سازد و برای درست کار کردن آدرس‌ها لازم است.

گام ۳: تمام

دامنه را باز کنید. صفحه معرفی نمایش داده می‌شود و از همان‌جا می‌توانید به /shop و بقیه صفحات بروید.

نصب در زیرپوشه

مهم‌ترین نکته این فصل. اگر سایت در ریشه دامنه نیست و بیلد را بدون تنظیم زیر بگیرید، صفحه بدون استایل و بدون تصویر باز می‌شود؛ چون Next آدرس فایل‌ها را از ریشه دامنه می‌نویسد و آن‌ها یک پوشه پایین‌تر هستند.

برای example.com/novira/:

NOVIRA_BASE_PATH=novira npm run build:static

سپس محتوای out/ را در public_html/novira/ آپلود کنید.

مقدار را بدون اسلش ابتدایی بنویسید. اگر روی ویندوز از Git Bash استفاده می‌کنید و /novira بنویسید، شل آن را به C:/Program Files/Git/novira تبدیل می‌کند و بیلد با خطای «Missing parameter name» شکست می‌خورد. بیلد این حالت را تشخیص می‌دهد و پیام روشن می‌دهد.

روش مطمئن‌تر: یک فایل .env کنار package.json بسازید. شل در آن دخالتی نمی‌کند:

NOVIRA_BASE_PATH=/novira

و بعد فقط npm run build:static بزنید.

نام پوشه باید دقیقاً با مسیر URL یکی باشد. اگر پوشه out را داخل novira-nextjs آپلود کنید، آدرس سایت /novira-nextjs/out/ می‌شود و مقدار باید novira-nextjs/out باشد. تمیزتر این است که محتوای out/ را مستقیم در novira-nextjs/ بگذارید و مقدار را novira-nextjs بدهید.

مسیر ۲: هاست با پشتیبانی Node.js

اگر پنل شما «Setup Node.js App» یا مشابه دارد و می‌خواهید بعداً به API واقعی وصل شوید، این مسیر مناسب‌تر است.

گام ۱: ساخت

npm install
npm run build

گام ۲: آپلود

این موارد را آپلود کنید:

.next/                خروجی بیلد
public/               تصاویر و فونت‌ها
package.json
package-lock.json
next.config.ts

node_modules را آپلود نکنید؛ روی سرور نصب می‌شود.

گام ۳: تنظیم اپلیکیشن در پنل

سپس در همان صفحه:

1. دکمه Run NPM Install را بزنید
2. دستور شروع را روی npm start بگذارید
3. اپلیکیشن را Start کنید

اگر پنل فقط یک فیلد startup file دارد و اجازه اجرای اسکریپت نمی‌دهد، یک فایل server.js بسازید:

const { createServer } = require('http');
const next = require('next');

const port = process.env.PORT || 3000;
const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => handle(req, res)).listen(port);
});

و server.js را به‌عنوان startup file معرفی کنید.

بررسی قبل از آپلود

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

npm run preview      # http://localhost:3030

اگر در زیرپوشه نصب می‌کنید، دقیقاً همان مسیر را شبیه‌سازی کنید:

BASE_PATH=/novira npm run preview    # http://localhost:3030/novira/

اگر همه صفحات آنجا درست باز می‌شوند، روی هاست هم درست باز می‌شوند.

چک‌لیست پس از استقرار

HTTPS

در پنل هاست گواهی SSL رایگان (Let's Encrypt) را فعال و ریدایرکت HTTP به HTTPS را روشن کنید.

به‌روزرسانی بعدی

هر بار که تغییری دادید، دوباره npm run build:static بگیرید و محتوای out/ را جایگزین کنید. فایل‌های قدیمی پوشه _next/ را حذف کنید تا فایل بلااستفاده جمع نشود.

عیب‌یابی استقرار

گام بعدی

• راهنمای نسخه Next.js
• عیب‌یابی عمومی