Deploy Next.js static to GitLab pages

Deploy-Next.js-static-to-GitLab-pages.md

Deploy Next.js static to GitLab pages

Create a basic GitLab CI config:

$ cat .gitlab-ci.yml
image: node

before_script:
  - npm install

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .next/cache/

pages:
  script:
    - npm run-script build && npm run-script export
    - mv out public
  artifacts:
    paths:
      - public
  only:
    - master

Adapt the assets URL to use the subdirectory of your repo name in the way https://<GITLAB_USER_NAME>.gitlab.com/<GITLAB_PROJECT_NAME> (removing the brackets <>):

$ cat next.config.js 
# ...
module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production' ? '/<GITLAB_PROJECT_NAME>' : '',
  # ...

Once we push the changes, GitLab CI will trigger a build and will publish the page under https://<GITLAB_USER_NAME>.gitlab.com/<GITLAB_PROJECT_NAME>.

The above worked for me as well. Thanks for posting. If anyone stumbles upon this, for posterity, here is my functioning setup.

# .gitlab-ci.yml

image: <insert your image here>

pages:
  stage: build
  script:
    - yarn
    - yarn build
    - yarn export
    - rm -rf public/*
    - mv out/* public
  artifacts:
    paths:
      - public
  cache:
    paths:
      - node_modules
  only:
    - main

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    assetPrefix: process.env.NODE_ENV === 'production' ? '/name-of-repository' : '',
}

module.exports = nextConfig