ساخت و اجرای Next.js بدون نصب Node.js با استفاده از Docker

سلام
من خیلی حرفه‌ای نیستم ولی خواستم تجربه‌ای که خودم به‌دست آوردم رو با شما به اشتراک بگذارم. چون موقع جست‌وجو برای این موضوع محتوای خوبی پیدا نکردم، گفتم شاید برای بقیه هم مفید باشه.
این آموزش مخصوص حالت Development هست (نه Production). هنوز برای محیط عملیاتی ازش استفاده نکردم ولی احتمالاً در آینده نسخه‌ی Production رو هم منتشر می‌کنم.

خب مواد اولیه :
- Docker (اگر از سیستم عامل ویندوز استفاده میکنید Docker Desktop)
- code editor یا IDE مثل (vs code / webstorm / intellij)

بعد از اینکه Docker نصب کردید برای اینکه مطمئن باشید کامند زیر رو اجرا کنید.

docker --version

و اگر نتیجه ای مثل خط پایین گرفتید یعنی نصب اکی بوده

Docker version 28.0.2, build 12345abc

با توجه به نسخه‌ای که استفاده می‌کنید، این عددها ممکنه متفاوت باشن. الان که مطمئن شدیم Docker درست نصب شده، می‌ریم سراغ ساخت محیط Node.js داخل Docker ، این صفحه راهنما داده که چطور نصب کنیم حالا منم اینجا مینویسم . دستوراتی که این زیر هست رو به ترتیب در shell یا cmd بزنید.

# Docker has specific installation instructions for each operating system.
# Please refer to the official documentation at https://docker.com/get-started/

# Pull the Node.js Docker image:
docker pull node:22-alpine

# Create a Node.js container and start a Shell session:
docker run -it --rm --entrypoint sh node:22-alpine

# Verify the Node.js version:
node -v # Should print "v22.21.0".

# Verify npm version:
npm -v # Should print "10.9.4".

به طور خلاصه بگم چیکار میکنه میاد Node نسخه 22 رو از image های روی Docker دانلود میکنه روی سیستم لوکال شما و سه تا دستور اخر برای این هست که مطمئن بشید همه چیز درست کار میکنه. خواستید میتونید این پنجره را ببندید. خب الان که همه چیز اماده هست میتونیم بریم سراغ ساخت پروژه Next.js اول از همه میریم داخل پوشه ای که میخواهیم پروژه ساخته بشه مثلا من میرم درایو D و یک پوشه میسازم اسمشو میزام test-docker و بعد کامند زیر رو میزنم

docker init

و بعد این گزینه رو میزنم

Other - general purpose starting point for containerizing your application

این دستور میاد و برای ما 4 تافایل مربوط به Docker به اسم های زیر میسازه.

.dockerignore
Dockerfile
compose.yaml
README.Docker.md 

الان باید بریم و پروژه Next.js که میخواهیم رو بسازیم.
با استفاده از این کامند این کار انجام میشه :

docker run --rm -it -v D:\test-docker:/app -w /app node:22-alpine sh -c "npx create-next-app@latest front-app"

و پروژه Next.js داخل پوشه ای به اسم front-app ساخته میشه.

ساختار پروژه تا اینجا به این شکل شده :

D:\test-docker
├── Dockerfile
├── compose.yaml
├── .dockerignore
├── README.Docker.md 
└── front-app
    ├── package.json
    ├── next.config.js
    ├── pages/
    ├── ...

خب الان پوشه test-docker رو با کد ادیتوری که داریم باز میکنیم .
اول میریم سراغ Dockerfile ، اصلا چی هست؟ Dockerfile برای ساخت image استفاده میشه
مقادیر زیر رو داخل Dockerfile قرار میدهیم.

# Dockerfile (development)
FROM node:22-alpine

# فعال‌سازی hot reload
ENV WATCHPACK_POLLING=true

WORKDIR /app

# فقط فایل‌های package برای cache نصب
COPY front-app/package*.json ./
RUN npm install

# در حالت dev بقیه کدها از طریق volume روی سیستم host میاد
EXPOSE 3000

# اجرای سرور در حالت dev
CMD ["npm", "run", "dev"]

بعد میریم سراغ compose.yaml و مقادیر زیر رو داخلش قرار میدیم.

version: "3.8"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - WATCHPACK_POLLING=true
    volumes:
      - ./front-app:/app
      - /app/node_modules
    command: npm run dev

 نکته‌ها:

🔹 volumes باعث می‌شه کدهای روی سیستم، داخل کانتینر sync بشن.
🔹 مسیر /app/node_modules از overwrite شدن جلوگیری می‌کنه.
🔹 دستور command: npm run dev پروژه رو در حالت hot reload اجرا می‌کنه.

و در نهایت با زدن کامند

docker compose up 

به راحتی پروژه بالا میاد و روی port 3000 امکان دسترسی به پروژه وجود داره.

در نسخه‌های جدید Next.js (از 13 به بعد)، وقتی فقط می‌نویسی next dev، به صورت پیش‌فرض از Turbopack استفاده می‌کنه.

اما Turbopack هنوز در حالت توسعه‌ی آزمایشی هست و در محیط Docker یا bind mount (وقتی پروژه داخل ویندوز و کد در لینوکسه) معمولاً تغییرات را درست تشخیص نمی‌دهد و hot reload یا recompile درست کار نمی‌کند.
در عوض webpack پایدار است و در Docker به‌خوبی عمل می‌کند.
درصورتی که دیدید hotreload یا recompile درست کار نمیکنه ، باید در اسکریپت dev داخل package.json پروژه، بنویسید:

"scripts": {
  "dev": "next dev --webpack"
}

با این روش می‌تونید بدون نصب Node.js، پروژه‌ی Next.js خودتون رو در محیط Docker توسعه بدید.
اگر تجربه یا روش بهتری دارید، خوشحال می‌شم در بخش نظرات بنویسید تا بقیه هم(بیشتر خودم D:) استفاده کنن.