Back to Home
Next.js 项目部署指南

Next.js 项目部署指南

April 15, 2024React, Technology, Hexo

本文介绍如何将 Next.js 项目部署到各种平台。

Vercel(推荐)

Vercel 是 Next.js 的官方托管平台:

npm i -g vercel
vercel

优点:

  • 零配置部署
  • 自动 CI/CD
  • 边缘网络加速
  • 免费额度充足

Netlify

npm run build
# 将 .next 目录部署到 Netlify

需要安装 @netlify/plugin-nextjs 插件。

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

静态导出

如果不需要服务端渲染,可以使用静态导出:

// next.config.js
module.exports = {
  output: 'export',
}

然后 npm run build 生成的 out 目录可以部署到任何静态托管服务。

环境变量

部署时注意配置环境变量:

# .env.production
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...