Next.js site with basePath config gets ignored on Netlify deploy

I’m using the Next.js repo for NetlifyCMS. I’ve only made two changes to the default code:

  1. Moved the posts pages up to the root level
  2. Added the basePath of /blog and assetPrefix of /blog/ to the next.config as defined here

Locally, this performs as expected where the Next site is located at localhost:3000/blog

When deploying to my site on Netlify (https://jovial-morse-3e114b.netlify.app) it seems to ignore this and adds it to the root directory. Meaning the root directory is taking the place of the blog subdirectory. Next is still trying to use the basePath that I defined so all links are prefixed with /blog. Going to any of the links brings up a 404 but removing “blog” from the path loads the correct file.

How can I get the Netlify build to use the basePath and not revert to the root directory?

Build Settings:

Build command: npm run export
Publish directory: dist

Log:

10:59:09 AM: Build ready to start
10:59:11 AM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
10:59:11 AM: build-image tag: v3.4.1
10:59:11 AM: buildbot version: 0e43e88a84db6c7a5f9e545ccf1a68b4e8b829b1
10:59:11 AM: Fetching cached dependencies
10:59:11 AM: Starting to download cache of 112.8MB
10:59:12 AM: Finished downloading cache in 595.058395ms
10:59:12 AM: Starting to extract cache
10:59:17 AM: Finished extracting cache in 4.685382428s
10:59:17 AM: Finished fetching cache in 5.307712308s
10:59:17 AM: Starting to prepare the repo for build
10:59:17 AM: Preparing Git Reference refs/heads/main
10:59:19 AM: Starting build script
10:59:19 AM: Installing dependencies
10:59:19 AM: Python version set to 2.7
10:59:19 AM: Started restoring cached node version
10:59:22 AM: Finished restoring cached node version
10:59:22 AM: v12.18.0 is already installed.
10:59:23 AM: Now using node v12.18.0 (npm v6.14.4)
10:59:23 AM: Started restoring cached build plugins
10:59:23 AM: Finished restoring cached build plugins
10:59:23 AM: Attempting ruby version 2.7.1, read from environment
10:59:25 AM: Using ruby version 2.7.1
10:59:25 AM: Using PHP version 5.6
10:59:25 AM: 5.2 is already installed.
10:59:25 AM: Using Swift version 5.2
10:59:25 AM: Started restoring cached node modules
10:59:25 AM: Finished restoring cached node modules
10:59:25 AM: Started restoring cached yarn cache
10:59:25 AM: Finished restoring cached yarn cache
10:59:26 AM: Installing NPM modules using Yarn version 1.22.4
10:59:26 AM: yarn install v1.22.4
10:59:26 AM: [1/4] Resolving packages...
10:59:27 AM: success Already up-to-date.
10:59:27 AM: Done in 0.73s.
10:59:27 AM: NPM modules installed using Yarn
10:59:27 AM: Started restoring cached go cache
10:59:27 AM: Finished restoring cached go cache
10:59:27 AM: go version go1.14.4 linux/amd64
10:59:27 AM: go version go1.14.4 linux/amd64
10:59:27 AM: Installing missing commands
10:59:27 AM: Verify run directory
10:59:28 AM: ​
10:59:28 AM: ┌─────────────────────────────┐
10:59:28 AM: │        Netlify Build        │
10:59:28 AM: └─────────────────────────────┘
10:59:28 AM: ​
10:59:28 AM: ❯ Version
10:59:28 AM:   @netlify/build 4.6.3
10:59:28 AM: ​
10:59:28 AM: ❯ Flags
10:59:28 AM:   deployId: 5f77403dd9d13e00070ec3a0
10:59:28 AM:   mode: buildbot
10:59:28 AM: ​
10:59:28 AM: ❯ Current directory
10:59:28 AM:   /opt/build/repo
10:59:28 AM: ​
10:59:28 AM: ❯ Config file
10:59:28 AM:   /opt/build/repo/netlify.toml
10:59:28 AM: ​
10:59:28 AM: ❯ Context
10:59:28 AM:   production
10:59:28 AM: ​
10:59:28 AM: ❯ Loading plugins
10:59:28 AM:    - netlify-plugin-cache-nextjs@1.4.0 from Netlify app
10:59:28 AM: ​
10:59:28 AM: ┌────────────────────────────────────────────────────────┐
10:59:28 AM: │ 1. onPreBuild command from netlify-plugin-cache-nextjs │
10:59:28 AM: └────────────────────────────────────────────────────────┘
10:59:28 AM: ​
10:59:29 AM: Restored the cached .next folder at the location `.next/cache`
10:59:29 AM: ​
10:59:29 AM: (netlify-plugin-cache-nextjs onPreBuild completed in 396ms)
10:59:29 AM: ​
10:59:29 AM: ┌────────────────────────────────────┐
10:59:29 AM: │ 2. build.command from netlify.toml │
10:59:29 AM: └────────────────────────────────────┘
10:59:29 AM: ​
10:59:29 AM: $ npm run export
10:59:29 AM: > my-app@0.1.1 export /opt/build/repo
10:59:29 AM: > next build && next export -o ./dist
10:59:30 AM: Creating an optimized production build...
10:59:42 AM: Compiled successfully.
10:59:42 AM: 
10:59:42 AM: Automatically optimizing pages...
10:59:46 AM: Page                              Size     First Load JS
10:59:46 AM: ┌ ● /                             2.52 kB        74.6 kB
10:59:46 AM: ├   /_app                         0 B            58.1 kB
10:59:46 AM: ├ ○ /404                          2.77 kB        60.9 kB
10:59:46 AM: ├ ○ /license                      1.15 kB          79 kB
10:59:46 AM: ├ ○ /lorem-ipsum                  1.65 kB        79.5 kB
10:59:46 AM: ├ ○ /markdown-syntax              2.85 kB        80.7 kB
10:59:46 AM: ├ ● /page/[page]                  2.54 kB        74.6 kB
10:59:46 AM: ├   └ /page/2
10:59:46 AM: ├ ○ /references                   808 B          78.6 kB
10:59:46 AM: ├ ○ /rich-content-with-mdx        11 kB          88.8 kB
10:59:46 AM: ├ ● /tags/[[...slug]]             2.5 kB         74.6 kB
10:59:46 AM: ├   ├ /tags/document
10:59:46 AM: ├   ├ /tags/mock
10:59:46 AM: ├   ├ /tags/style
10:59:46 AM: ├   └ [+3 more paths]
10:59:46 AM: └ ○ /welcome                      1.69 kB        79.5 kB
10:59:46 AM: + First Load JS shared by all     58.1 kB
10:59:46 AM:   ├ chunks/commons.e55252.js      10.4 kB
10:59:46 AM:   ├ chunks/framework.639a4c.js    40.3 kB
10:59:46 AM:   ├ chunks/main.cb7428.js         6.4 kB
10:59:46 AM:   ├ chunks/pages/_app.dc575e.js   306 B
10:59:46 AM:   ├ chunks/webpack.488dc2.js      751 B
10:59:46 AM:   └ css/6034d55e9030db9c35af.css  1.02 kB
10:59:46 AM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
10:59:46 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
10:59:46 AM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
10:59:46 AM: Redirects
10:59:46 AM: ┌ source: /blog/
10:59:46 AM: ├ destination: /blog
10:59:46 AM: └ permanent: true
10:59:46 AM: ┌ source: /blog/:path+/
10:59:46 AM: ├ destination: /blog/:path+
10:59:46 AM: └ permanent: true
10:59:46 AM: > using build directory: /opt/build/repo/.next
10:59:46 AM:   copying "static build" directory
10:59:46 AM: > No "exportPathMap" found in "next.config.js". Generating map from "./pages"
10:59:46 AM:   launching 7 workers
10:59:46 AM: Exporting (0/8)
10:59:46 AM:   copying "public" directory
10:59:47 AM: Exporting (1/8)
10:59:47 AM: Exporting (2/8)
10:59:47 AM: Exporting (3/8)
10:59:47 AM: Exporting (4/8)
10:59:47 AM: Exporting (5/8)
10:59:47 AM: Exporting (6/8)
10:59:47 AM: Exporting (7/8)
10:59:47 AM: Exporting (8/8)
10:59:47 AM: Export successful
10:59:47 AM: ​
10:59:47 AM: (build.command completed in 18.6s)
10:59:47 AM: ​
10:59:47 AM: ┌─────────────────────────────────────────────────────────┐
10:59:48 AM: Creating deploy upload records
10:59:47 AM: │ 3. onPostBuild command from netlify-plugin-cache-nextjs │
10:59:47 AM: └─────────────────────────────────────────────────────────┘
10:59:47 AM: ​
10:59:47 AM: Cached the .next folder at the location `.next/cache`
10:59:47 AM: ​
10:59:47 AM: (netlify-plugin-cache-nextjs onPostBuild completed in 168ms)
10:59:47 AM: ​
10:59:47 AM: ┌─────────────────────────────┐
10:59:47 AM: │   Netlify Build Complete    │
10:59:47 AM: └─────────────────────────────┘
10:59:47 AM: ​
10:59:47 AM: (Netlify Build completed in 19.4s)
10:59:48 AM: Caching artifacts
10:59:48 AM: Started saving node modules
10:59:48 AM: Finished saving node modules
10:59:48 AM: Started saving build plugins
10:59:48 AM: Finished saving build plugins
10:59:48 AM: Started saving yarn cache
10:59:48 AM: Finished saving yarn cache
10:59:48 AM: Started saving pip cache
10:59:48 AM: Finished saving pip cache
10:59:48 AM: Started saving emacs cask dependencies
10:59:48 AM: Finished saving emacs cask dependencies
10:59:48 AM: Started saving maven dependencies
10:59:48 AM: Finished saving maven dependencies
10:59:48 AM: Started saving boot dependencies
10:59:48 AM: Finished saving boot dependencies
10:59:48 AM: Started saving go dependencies
10:59:48 AM: Finished saving go dependencies
10:59:48 AM: Build script success
10:59:48 AM: Starting to deploy site from 'dist'
10:59:48 AM: Creating deploy tree 
10:59:48 AM: 16 new files to upload
10:59:48 AM: 0 new functions to upload
10:59:49 AM: Starting post processing
10:59:49 AM: Post processing - HTML
10:59:50 AM: Post processing - header rules
10:59:50 AM: Post processing - redirect rules
10:59:50 AM: Post processing done
10:59:51 AM: Site is live
11:00:09 AM: Finished processing build request in 57.43359771s
```.

As a note, I’m trying to get it working at the /blog subdirectory because I am using a proxy from a separate site as outlined in this support guide

seems like a sensible thing to try, @mspencer!

What I see from the last deploy on that site is a bit of a disconnect:

  • You told us to deploy “/dist”
  • “/dist” seemed to contain files directly like license.html and welcome.html
  • /dist should INSTEAD include only dist/blog/*

So I assert your build framework isn’t “listening” to those settings you declared you were trying to use, while building here. You could either fix that (I heard your description, but not sure how/where you are “setting” those so no idea if it is expected to be effective or no), or in case your build pipeline doesn’t get it right, you could try to patch things up using our features:

  1. change your build command to npm run export && cd dist && mkdir blog && mv * blog
  2. this will mean your files are deployed at /blog/*
  3. then create a 200 redirect (rewrite) from /* to /blog/* to patch up any wrong URL’s, if that isn’t incompatible with next’s needs around Single-page app routing? This is optional, in case it won’t work.

@fool Thanks for the response! I believe you are correct about how to handle this. The only issue that it then runs into is that it is trying to take the new blog directory and move it into itself. Is there a mv command that works with Netlify to move all except the /blog directory?

There are as many ways to do that as there are people who write shell scripts, but as a simple suggestion, if you have no other files or directories starting with b, you could use this regular expression:

mv [^b]* blog/

Worked like a charm, thanks! I ended up setting it to mv [^blog]* blog to further reduce the likelihood that something would match “blog”

1 Like