Skip to content

Instantly share code, notes, and snippets.

@jesugmz
Last active April 9, 2024 14:33
Show Gist options
  • Save jesugmz/20634d1076addfd9ab0dfceb286111c4 to your computer and use it in GitHub Desktop.
Save jesugmz/20634d1076addfd9ab0dfceb286111c4 to your computer and use it in GitHub Desktop.
Deploy Next.js static to GitLab pages

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

@jesugmz
Copy link
Author

jesugmz commented Jan 4, 2022

@dbsecj from your trace:

//...
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: azimuth-nextjs@0.1.0
//...

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.

@splunkmoody
Copy link

splunkmoody commented Feb 26, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment