寻求Next.js 13应用GitLab Runner CI/CD流水线搭建教程示例

下面是适配Next.js 13（支持App Router/Page Router）的完整.gitlab-ci.yml配置，解决旧版本配置不兼容的问题：

# 定义流水线阶段
stages:
  - install
  - build
  - test
  - deploy

# 使用Node.js 18镜像（Next.js 13推荐最低Node 16，18更稳定）
image: node:18-alpine

# 缓存依赖和构建缓存，大幅缩短流水线时间
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .next/cache/

# 安装依赖阶段
install_deps:
  stage: install
  script:
    # 使用npm ci确保依赖版本与lockfile完全一致
    - npm ci
  only:
    - main
    - develop

# 构建阶段（适配Next.js 13的App Router）
build_app:
  stage: build
  script:
    # 执行Next.js构建命令，默认输出到.next目录
    - npm run build
  artifacts:
    # 保存构建产物，供部署阶段使用
    paths:
      - .next/
      - public/
      - package.json
    expire_in: 1 week
  only:
    - main
    - develop

# 可选：测试阶段（根据你的项目测试框架调整）
run_tests:
  stage: test
  script:
    # 这里以Jest为例，若用Cypress需额外配置浏览器环境
    - npm run test
  only:
    - main
    - develop

# 部署阶段（示例：部署到自有服务器，可替换为Vercel/Netlify等平台）
deploy_to_server:
  stage: deploy
  script:
    # 1. 安装ssh客户端（alpine镜像默认没有）
    - apk add --no-cache openssh-client
    # 2. 配置ssh免密登录（需在GitLab CI变量中添加SSH_PRIVATE_KEY）
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan -H your-server-ip >> ~/.ssh/known_hosts
    # 3. 上传构建产物到服务器并重启服务（根据你的部署流程调整）
    - scp -r .next/ public/ package.json user@your-server-ip:/path/to/deploy/folder
    - ssh user@your-server-ip "cd /path/to/deploy/folder && npm install --production && pm2 restart next-app"
  only:
    - main

关键配置说明 #

• 镜像选择：必须用Node.js 16+版本，Next.js 13的App Router依赖Node 16.8+，推荐18.x
• 缓存策略：缓存node_modules和.next/cache能避免重复下载依赖和重复构建静态资源，极大提升流水线效率
• 构建产物：Next.js 13构建后默认输出到.next目录（静态导出模式是out），需根据你的项目配置调整artifacts.paths
• 环境变量：项目中用到的NEXT_PUBLIC_*等环境变量，需要在GitLab项目的「Settings → CI/CD → Variables」中添加，流水线会自动注入

常见坑点解决 #

1. App Router构建失败：确保next.config.js中没有旧版本的配置冲突，比如target字段在Next.js 13中已废弃
2. 权限问题：部署阶段的SSH密钥要设置正确权限（chmod 600），否则会被ssh拒绝
3. 依赖安装慢：如果是国内环境，可以在install_deps阶段添加npm config set registry https://registry.npmmirror.com切换镜像

内容的提问来源于stack exchange，提问作者BloodOverdrive