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>.

@dbsecj from your trace:

//...
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
//...

npm is telling you cannot find that package and seems it does not exists under npm repository.

---

@ibadeeCodes the instruction mv out public is safer than mv out/* public -more inclusive- also I recommend you to check the web console to check what is the exact error.

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