Next.js 是 React 生態(tài)中非常流行的前端框架，支持 SSR（Server-Side Rendering）、API 路由 和 靜態(tài)生成。在開發(fā)階段，Next.js 可以通過 next dev 運行，但在生產(chǎn)環(huán)境下，我們需要打包并部署 SSR 服務(wù)。本文將介紹完整的 Next.js SSR 生產(chǎn)部署流程，適用于 1Panel 或 VPS 服務(wù)器。

一、 本地準備

假設(shè)你的 Next.js 項目目錄如下：

package.json
package-lock.json / yarn.lock
pages/
public/
components/
next.config.js
node_modules/

SSR 項目需要 Node.js 后端支持，因此生產(chǎn)環(huán)境必須有 Node.js 環(huán)境。

二、安裝依賴

如果使用 npm：

npm install

如果使用 yarn：

yarn install

確保依賴完整，尤其是 next、react 和 react-dom。

三、 構(gòu)建生產(chǎn)版本

Next.js 提供 next build 命令生成生產(chǎn)構(gòu)建產(chǎn)物：

npm run build
# 或者
yarn build

• 會生成 .next/ 目錄，包含 SSR 所需文件
• 構(gòu)建完成后可以通過 next start 啟動生產(chǎn)服務(wù)

四、 測試生產(chǎn)環(huán)境（可選）

npm start
# 或者
yarn start

• 默認端口 3000
• 確認 SSR 頁面可以正常訪問

五、準備上傳文件

生產(chǎn)部署至少需要以下內(nèi)容：

package.json
package-lock.json / yarn.lock
.next/        # SSR 構(gòu)建產(chǎn)物
public/       # 靜態(tài)資源
node_modules/ # 可上傳，也可服務(wù)器安裝

可以打包成 ZIP 上傳：

zip -r next-prod.zip package.json package-lock.json .next public .env

六、上傳到服務(wù)器 / 1Panel

• 1Panel：直接上傳 ZIP 或 Git 克隆項目
• VPS / 云服務(wù)器：通過 scp 上傳

scp next-prod.zip user@yourserver:/path/to/app
ssh user@yourserver
unzip next-prod.zip -d next-app
cd next-app

七、安裝生產(chǎn)依賴（如果未上傳 node_modules）

npm install --production
# 或者
yarn install --production

SSR 生產(chǎn)環(huán)境只需要安裝 dependencies，不需要 devDependencies

八、配置環(huán)境變量

Next.js SSR 項目常用環(huán)境變量：

NODE_ENV=production
PORT=3000
NEXT_PUBLIC_API_URL=https://api.example.com

可以在服務(wù)器環(huán)境中設(shè)置，也可以使用 .env.production 文件

九、啟動生產(chǎn) SSR 服務(wù)

方式一：直接 Node.js

npm start
# 或者
yarn start

• 訪問 http://你的域名或公網(wǎng)IP:3000
• 頁面由服務(wù)器渲染并返回 HTML（SSR）

方式二：PM2 守護

npm install -g pm2
pm2 start npm --name "next-app" -- start
pm2 save
pm2 startup

• 保證服務(wù)器重啟后自動啟動
• 提供日志管理和進程監(jiān)控

方式三：Docker 部署（可選）

Dockerfile 示例：

FROM node:20-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
RUN npm run build
CMD ["npm", "start"]
EXPOSE 3000

構(gòu)建 & 運行：

docker build -t next-app .
docker run -d -p 3000:3000 next-app

十、 可選：Nginx 反向代理 + HTTPS

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

• 配合 Let's Encrypt 可免費啟用 HTTPS
• 提高安全性與穩(wěn)定性

十一、完整部署流程總結(jié)

1. 本地 npm install / yarn install
2. npm run build / yarn build 生成 .next/
3. 上傳 .next/ + public/ + package.json + node_modules（可選）
4. 服務(wù)器安裝依賴（如需要）
5. 配置環(huán)境變量
6. 使用 npm start / PM2 / Docker 啟動
7. 可選 Nginx 反向代理 + HTTPS
8. 訪問頁面，確認 SSR 正常渲染

十二、 小技巧

• 端口管理：1Panel 默認分配公網(wǎng)端口，確保 PORT 與之匹配
• 守護進程：PM2 或 Docker 保證 SSR 服務(wù)穩(wěn)定運行
• 環(huán)境變量：生產(chǎn)環(huán)境變量一定要配置正確，否則 SSR 可能報錯
• 安全與性能：建議 Nginx 反向代理 + HTTPS

通過以上步驟，你可以快速將 Next.js SSR 項目 打包、上傳，并在 1Panel 或 VPS 上運行生產(chǎn)環(huán)境，實現(xiàn)服務(wù)端渲染。

到此這篇關(guān)于Next.js SSR 項目生產(chǎn)部署全攻略的文章就介紹到這了,更多相關(guān)Next.js SSR生產(chǎn)部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論