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

I got this error

make: *** No rule to make target 'build-prod'.  Stop.
Cleaning up file based variables
00:00
ERROR: Job failed: exit code ```

If anyone faces same issue like the above one then here is some fixes :

in package.json update scripts

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  }

in .gitlab-ci.yml

pages:
  script:
    - npm run-script build && npm run-script export
    - rm -rf public/*
    - mv out/* public

Check this too

I got this error

make: *** No rule to make target 'build-prod'.  Stop.
Cleaning up file based variables
00:00
ERROR: Job failed: exit code ```

In effect, make prod is a custom script which doesn't appear here @ArnabXD. As it was commented:

make build-prod # which basically does npm run-script build && npm run-script export

Under the hood it was doing these npm scripts, it was just a copy & paste from one of my projects.
Updated to avoid future confusions, thanks!

When I used the above instruction, my project ran successfully but the public(assets) are not shown in live.
Anyone?

pages:
script:
- npm run-script build && npm run-script export
- rm -rf public/*
- mv out/* public

I think this is happening because of the second command (rm -rf public/*). I made mistake there.
Try omitting that command, If works fine let me know I should update/delete that comment.

@jesugmz how to deploy locally built nextjs site to gitlab pages? i think still need a simple config as this a-gitlab-ci

data

```

[0KRunning with gitlab-runner 14.6.0~beta.71.gf035ecbf (f035ecbf)�[0;m
�[0K on green-2.shared.runners-manager.gitlab.com/default ns46NMmJ�[0;m
section_start:1641275479:prepare_executor
�[0K�[0K�[36;1mPreparing the "docker+machine" executor�[0;m�[0;m
�[0KUsing Docker executor with image node ...�[0;m
�[0KPulling docker image node ...�[0;m
�[0KUsing docker image sha256:a283f62cb84bb63fdd8d12ef9fa0fc743bd110bc66fd7460094beb915b4e4374 for node with digest node@sha256:36aca218a5eb57cb23bc790a030591382c7664c15a384e2ddc2075761ac7e701 ...�[0;m
section_end:1641275514:prepare_executor
�[32;1mCreated fresh repository.�[0;m
�[32;1mChecking out 5bf7017b as master...�[0;m
�[32;1mSkipping Git submodules setup�[0;m
section_end:1641275519:get_sources
�[0Ksection_start:1641275519:restore_cache
�[0K�[0K�[36;1mRestoring cache�[0;m�[0;m
�[32;1mChecking cache for master...�[0;m
�[31;1mFATAL: file does not exist �[0;m
�[0;33mFailed to extract cache�[0;m
section_end:1641275520:restore_cache
�[0Ksection_start:1641275520:step_script
�[0K�[0K�[36;1mExecuting "step_script" stage of the job script�[0;m�[0;m
�[0KUsing docker image sha256:a283f62cb84bb63fdd8d12ef9fa0fc743bd110bc66fd7460094beb915b4e4374 for node with digest node@sha256:36aca218a5eb57cb23bc790a030591382c7664c15a384e2ddc2075761ac7e701 ...�[0;m
�[32;1m$ npm install�[0;m
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: azimuth-nextjs@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0" from react-html-parser@2.0.2
npm ERR! node_modules/react-html-parser
npm ERR! react-html-parser@"^2.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-01-04T05_52_00_972Z-debug-0.log
section_end:1641275523:step_script
�[0Ksection_start:1641275523:cleanup_file_variables
�[0K�[0K�[36;1mCleaning up project directory and file based variables�[0;m�[0;m
section_end:1641275524:cleanup_file_variables
�[0K�[31;1mERROR: Job failed: exit code 1
�[0;m

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

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