Next.js: What's meant to be the root path is at /app

Support
,
1

I’ve deployed my Next site at https://ldb-export.netlify.app/ but that page is empty. What’s meant to be the root domain is at https://ldb-export.netlify.app/app, or actually any other path than the root.

On the Next.js dev server, it works as expected and is available at http://localhost:3000, and it also deploys as expected on Vercel, which makes me think this is an issue with Netlify.

I’m deploying the site from the GitHub master branch, and the @netlify/plugin-nextjs is a dev dependency at 4.33.0, the latest version.

I’ve deployed other Next.js sites on Netlify, but this is the only that is having this issue. Thanks in advance!

2

Hi @logankuzyk, thanks for the post and welcome.
It is possible your base directory has not been set.
Can you share a snippet of your build settings or the repository of your site so that I help with the debugging?

Thanks.

3

Hi @clarnx, here is my build configuration, you’re right, base directory wasn’t been set:

image
image927×442 20.3 KB

When I tried changing it to “/” to match what my other Next site is set to, I got this message in the deploy logs:

4:11:40 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: '' versus '/' in the Netlify UI

I didn’t include a netlify.toml file, but when I added one and set the base directory to “/”, the same message kept appearing in the deploy log.

Here is my new netlify.toml file:

[build]
  command = "npm run build"
  base = "/"
  publish = ".next"

In the pages folder of my Next project, there is only index.tsx and _app.tsx.

Thanks for your help!

4

Hi @logankuzyk, thanks for the feedback.
If your project files is in a sub-directory, kindly set the base directory to the name of the sub-directory.

If the above does not help, kindly read the information below on custom directories with Next.js. It is possible a custom directory is set.

Let me know the outcome.

Thanks.

5

Hey @clarnx, thanks for the tip. The only thing in my next.config.js file is some rewrites, I don’t have a custom build directory set, and the directory is set to .next on the Netlify settings as well. The project deploys and functions perfectly fine on Vercel with default settings.

Based on that log from the deployment in my last message, I’m confused why it doesn’t seem to be acknowledging what I set in netlify.toml, and why it says it’s reverting to what’s set there even when I remove netlify.toml.

I also noticed some stuff about redirects in the deploy log, I think something to do with routing might not be getting set properly. I’ve included the logs from the latest deployment. I’m not sure if this will have the info you need, let me know if you need anything else! :slight_smile:

4:24:33 PM: Build ready to start
4:24:36 PM: build-image version: 6c82004ef0368b3a0232c6837cead23188bb347e (focal)
4:24:36 PM: buildbot version: 0dfbdb6e6e614fd26450cfc6bacb47c4c6fd9626
4:24:36 PM: Fetching cached dependencies
4:24:36 PM: Starting to download cache of 164.5MB
4:24:37 PM: Finished downloading cache in 895ms
4:24:37 PM: Starting to extract cache
4:24:38 PM: Finished extracting cache in 1.242s
4:24:38 PM: Finished fetching cache in 2.208s
4:24:38 PM: Starting to prepare the repo for build
4:24:39 PM: Preparing Git Reference refs/heads/master
4:24:39 PM: Parsing package.json dependencies
4:24:40 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: '' versus '/' in the Netlify UI
4:24:41 PM: Starting to install dependencies
4:24:41 PM: Using PHP version 8.0
4:24:41 PM: Attempting Ruby version 2.7.2, read from environment
4:24:42 PM: Using Ruby version 2.7.2
4:24:42 PM: Python version set to 3.8
4:24:42 PM: Started restoring cached go cache
4:24:42 PM: Finished restoring cached go cache
4:24:42 PM: Installing Go version 1.19.5 (requested 1.19.5)
4:24:47 PM: go version go1.19.5 linux/amd64
4:24:48 PM: Started restoring cached Node.js version
4:24:49 PM: Finished restoring cached Node.js version
4:24:49 PM: v16.20.0 is already installed.
4:24:49 PM: Now using node v16.20.0 (npm v8.19.4)
4:24:49 PM: Enabling Node.js Corepack
4:24:49 PM: Started restoring cached build plugins
4:24:49 PM: Finished restoring cached build plugins
4:24:49 PM: Started restoring cached corepack dependencies
4:24:49 PM: Finished restoring cached corepack dependencies
4:24:49 PM: No npm workspaces detected
4:24:49 PM: Started restoring cached node modules
4:24:49 PM: Finished restoring cached node modules
4:24:50 PM: Installing npm packages using npm version 8.19.4
4:24:50 PM: up to date, audited 335 packages in 537ms
4:24:50 PM: 56 packages are looking for funding
4:24:50 PM:   run `npm fund` for details
4:24:50 PM: found 0 vulnerabilities
4:24:50 PM: npm packages installed
4:24:50 PM: Install dependencies script success
4:24:50 PM: Starting build script
4:24:50 PM: Using stage install dependencies
4:24:51 PM: Detected 1 framework(s)
4:24:51 PM: "next" at version "12.3.1"
4:24:51 PM: Section completed: initializing
4:24:53 PM: ​
4:24:53 PM:   Netlify Build                                                 
4:24:53 PM: ────────────────────────────────────────────────────────────────
4:24:53 PM: ​
4:24:53 PM: ❯ Version
4:24:53 PM:   @netlify/build 29.9.0
4:24:53 PM: ​
4:24:53 PM: ❯ Flags
4:24:53 PM:   baseRelDir: true
4:24:53 PM:   buildId: 642a0eb0f38dc80008738482
4:24:53 PM:   deployId: 642a0eb0f38dc80008738484
4:24:53 PM: ​
4:24:53 PM: ❯ Current directory
4:24:53 PM:   /opt/build/repo
4:24:53 PM: ​
4:24:53 PM: ❯ Config file
4:24:53 PM:   /opt/build/repo/netlify.toml
4:24:53 PM: ​
4:24:53 PM: ❯ Context
4:24:53 PM:   production
4:24:53 PM: ​
4:24:53 PM: ❯ Using Next.js Runtime - v4.33.0
4:24:54 PM: ​
4:24:54 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
4:24:54 PM: ────────────────────────────────────────────────────────────────
4:24:54 PM: ​
4:24:54 PM: Next.js cache restored.
4:24:54 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
4:24:54 PM: ​
4:24:54 PM: (@netlify/plugin-nextjs onPreBuild completed in 104ms)
4:24:54 PM: ​
4:24:54 PM:   2. build.command from netlify.toml                            
4:24:54 PM: ────────────────────────────────────────────────────────────────
4:24:54 PM: ​
4:24:54 PM: $ npm run build
4:24:54 PM: > ldb-export@0.1.0 build
4:24:54 PM: > next build
4:24:55 PM: Browserslist: caniuse-lite is outdated. Please run:
4:24:55 PM:   npx browserslist@latest --update-db
4:24:55 PM:   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
4:24:55 PM: info  - Linting and checking validity of types...
4:24:56 PM: error - ESLint: Failed to load config "react-app" to extend from. Referenced from: /opt/build/repo/package.json
4:24:58 PM: info  - Creating an optimized production build...
4:24:58 PM: Browserslist: caniuse-lite is outdated. Please run:
4:24:58 PM:   npx browserslist@latest --update-db
4:24:58 PM:   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
4:25:01 PM: info  - Compiled successfully
4:25:01 PM: info  - Collecting page data...
4:25:02 PM: info  - Generating static pages (0/3)
4:25:02 PM: info  - Generating static pages (3/3)
4:25:03 PM: info  - Finalizing page optimization...
4:25:03 PM: Route (pages)                              Size     First Load JS
4:25:03 PM: ┌ ○ /                                      230 B           257 kB
4:25:03 PM: ├   /_app                                  0 B             257 kB
4:25:03 PM: └ ○ /404                                   194 B           257 kB
4:25:03 PM: + First Load JS shared by all              261 kB
4:25:03 PM:   ├ chunks/framework-7dc8a65f4a0cda33.js   45.2 kB
4:25:03 PM:   ├ chunks/main-be72f234d096bf60.js        34.9 kB
4:25:03 PM:   ├ chunks/pages/_app-b4189897a54453fe.js  176 kB
4:25:03 PM:   ├ chunks/webpack-cb7634a8b6194820.js     884 B
4:25:03 PM:   └ css/2b4338cb2e2d0339.css               3.37 kB
4:25:03 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
4:25:03 PM: ​
4:25:03 PM: (build.command completed in 8.5s)
4:25:03 PM: ​
4:25:03 PM:   3. @netlify/plugin-nextjs (onBuild event)                     
4:25:03 PM: ────────────────────────────────────────────────────────────────
4:25:03 PM: ​
4:25:03 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
4:25:03 PM: Done
4:25:03 PM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
4:25:03 PM: Done
4:25:03 PM: Moving static page files to serve from CDN...
4:25:03 PM: Error moving file /opt/build/repo/.next/server/pages/index.html Error: dest already exists.
4:25:03 PM:     at /opt/build/repo/node_modules/fs-extra/lib/move/move.js:51:31
4:25:03 PM:     at /opt/build/repo/node_modules/universalify/index.js:22:54
4:25:03 PM: Moved 1 files
4:25:03 PM: You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
4:25:03 PM: Netlify configuration property "redirects" value changed to [
4:25:03 PM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
4:25:03 PM:   {
4:25:03 PM:     from: '/_next/image*',
4:25:03 PM:     query: { url: ':url', w: ':width', q: ':quality' },
4:25:03 PM:     to: '/_ipx/w_:width,q_:quality/:url',
4:25:03 PM:     status: 301
4:25:03 PM:   },
4:25:03 PM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
4:25:03 PM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
4:25:03 PM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
4:25:03 PM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
4:25:03 PM:   { from: '/trace', to: '/404.html', status: 404, force: true },
4:25:03 PM:   { from: '/traces', to: '/404.html', status: 404, force: true },
4:25:03 PM:   {
4:25:03 PM:     from: '/routes-manifest.json',
4:25:03 PM:     to: '/404.html',
4:25:03 PM:     status: 404,
4:25:03 PM:     force: true
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/build-manifest.json',
4:25:03 PM:     to: '/404.html',
4:25:03 PM:     status: 404,
4:25:03 PM:     force: true
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/prerender-manifest.json',
4:25:03 PM:     to: '/404.html',
4:25:03 PM:     status: 404,
4:25:03 PM:     force: true
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/react-loadable-manifest.json',
4:25:03 PM:     to: '/404.html',
4:25:03 PM:     status: 404,
4:25:03 PM:     force: true
4:25:03 PM:   },
4:25:03 PM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
4:25:03 PM:   {
4:25:03 PM:     from: '/api/*',
4:25:03 PM:     to: '/.netlify/functions/___netlify-handler',
4:25:03 PM:     status: 200
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/favicon.ico',
4:25:03 PM:     to: '/favicon.ico',
4:25:03 PM:     conditions: { Cookie: [Array] },
4:25:03 PM:     status: 200
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/index.html',
4:25:03 PM:     to: '/index.html',
4:25:03 PM:     conditions: { Cookie: [Array] },
4:25:03 PM:     status: 200
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/logo192.png',
4:25:03 PM:     to: '/logo192.png',
4:25:03 PM:     conditions: { Cookie: [Array] },
4:25:03 PM:     status: 200
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/logo512.png',
4:25:03 PM:     to: '/logo512.png',
4:25:03 PM:     conditions: { Cookie: [Array] },
4:25:03 PM:     status: 200
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/manifest.json',
4:25:03 PM:     to: '/manifest.json',
4:25:03 PM:     conditions: { Cookie: [Array] },
4:25:03 PM:     status: 200
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/robots.txt',
4:25:03 PM:     to: '/robots.txt',
4:25:03 PM:     conditions: { Cookie: [Array] },
4:25:03 PM:     status: 200
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/*',
4:25:03 PM:     to: '/.netlify/functions/___netlify-handler',
4:25:03 PM:     status: 200,
4:25:03 PM:     conditions: { Cookie: [Array] },
4:25:03 PM:     force: true
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/_next/data/77IRIEWRQQWz6KtmGRZKS/index.json',
4:25:03 PM:     to: '/.netlify/functions/___netlify-handler',
4:25:03 PM:     status: 200,
4:25:03 PM:     force: false
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/',
4:25:03 PM:     to: '/.netlify/functions/___netlify-handler',
4:25:03 PM:     status: 200,
4:25:03 PM:     force: false
4:25:03 PM:   },
4:25:03 PM:   {
4:25:03 PM:     from: '/*',
4:25:03 PM:     to: '/.netlify/functions/___netlify-handler',
4:25:03 PM:     status: 200
4:25:03 PM:   }
4:25:03 PM: ].
4:25:03 PM: ​
4:25:03 PM: (@netlify/plugin-nextjs onBuild completed in 55ms)
4:25:03 PM: ​
4:25:03 PM:   4. Functions bundling                                         
4:25:03 PM: ────────────────────────────────────────────────────────────────
4:25:03 PM: ​
4:25:03 PM: Packaging Functions from .netlify/functions-internal directory:
4:25:03 PM:  - ___netlify-handler/___netlify-handler.js
4:25:03 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
4:25:03 PM:  - _ipx/_ipx.js
4:25:03 PM: ​
4:25:13 PM: ​
4:25:13 PM: (Functions bundling completed in 10.1s)
4:25:13 PM: ​
4:25:13 PM:   5. Edge Functions bundling                                    
4:25:13 PM: ────────────────────────────────────────────────────────────────
4:25:13 PM: ​
4:25:13 PM: ​
4:25:13 PM: (Edge Functions bundling completed in 340ms)
4:25:13 PM: ​
4:25:13 PM:   6. @netlify/plugin-nextjs (onPostBuild event)                 
4:25:13 PM: ────────────────────────────────────────────────────────────────
4:25:13 PM: ​
4:25:13 PM: Next.js cache saved.
4:25:13 PM: ​
4:25:13 PM: (@netlify/plugin-nextjs onPostBuild completed in 106ms)
4:25:13 PM: ​
4:25:13 PM:   7. Deploy site                                                
4:25:13 PM: ────────────────────────────────────────────────────────────────
4:25:13 PM: ​
4:25:13 PM: Starting to deploy site from '.next'
4:25:14 PM: Calculating files to upload
4:25:14 PM: 13 new files to upload
4:25:14 PM: 2 new functions to upload
4:25:21 PM: Section completed: deploying
4:25:21 PM: Site deploy was successfully initiated
4:25:21 PM: ​
4:25:21 PM: Starting post processing
4:25:21 PM: (Deploy site completed in 7s)
4:25:21 PM: ​
4:25:21 PM:   Netlify Build Complete                                        
4:25:21 PM: ────────────────────────────────────────────────────────────────
4:25:21 PM: Post processing - HTML
4:25:21 PM: ​
4:25:21 PM: (Netlify Build completed in 28.1s)
4:25:21 PM: Caching artifacts
4:25:21 PM: Started saving node modules
4:25:21 PM: Post processing - header rules
4:25:21 PM: Finished saving node modules
4:25:21 PM: Started saving build plugins
4:25:21 PM: Finished saving build plugins
4:25:21 PM: Post processing - redirect rules
4:25:21 PM: Started saving corepack cache
4:25:21 PM: Finished saving corepack cache
4:25:21 PM: Started saving pip cache
4:25:21 PM: Finished saving pip cache
4:25:21 PM: Post processing done
4:25:21 PM: Started saving emacs cask dependencies
4:25:21 PM: Finished saving emacs cask dependencies
4:25:21 PM: Started saving maven dependencies
4:25:21 PM: Section completed: postprocessing
4:25:21 PM: Finished saving maven dependencies
4:25:21 PM: Started saving boot dependencies
4:25:21 PM: Finished saving boot dependencies
4:25:21 PM: Started saving rust rustup cache
4:25:21 PM: Finished saving rust rustup cache
4:25:21 PM: Started saving go dependencies
4:25:21 PM: Finished saving go dependencies
4:25:22 PM: Build script success
4:25:22 PM: Section completed: building
4:25:22 PM: Site is live ✨
4:25:23 PM: Uploading Cache of size 164.6MB
4:25:24 PM: Section completed: cleanup
4:25:24 PM: Finished processing build request in 48.241s
6

Hi @logankuzyk, kindly run the command specified in the quoted error message above to see if it works.

npx browserslist@latest --update-db

After you are done with the above kindly redeploy.

Thanks.

1 Like