netlify / next-runtime

The Next.js Runtime allows Next.js to run on Netlify with zero configuration
https://www.npmjs.com/package/@netlify/plugin-nextjs
649 stars 86 forks source link

[Bug]: trailingSlash: true working locally but not on Netlify #1788

Closed thomasryu closed 1 year ago

thomasryu commented 1 year ago

Summary

I am using a combination of TypeScript and NextJs and the trailingSlash: true option is not working on Netlify, with neither Pretty URLs enabled or not.

I've looked at the other related issues, currently opened, solved or closed, but none of the listed solutions work.

A simple example can be found here

Steps to reproduce

  1. Go to https://spiffy-sundae-34f3ed.netlify.app/
  2. Click on the link.
  3. Notice the destination doesn't have the trailing slash.

A link to a reproduction repository

https://github.com/thomasryu/nextjs-test

Next Runtime version

4.29.1

More information about your build

What OS are you using?

No response

Your netlify.toml file

`netlify.toml` ```toml [build.environment] NODE_VERSION = "12.22.7" # Cache rules for fonts [[headers]] for = "*.ttf" [headers.values] Cache-Control = "public, max-age=31536000, immutable" [[headers]] for = "*.woff" [headers.values] Cache-Control = "public, max-age=31536000, immutable" [[headers]] for = "*.woff2" [headers.values] Cache-Control = "public, max-age=31536000, immutable" ```

Your public/_redirects file

`_redirects` ```toml # Paste content of your `_redirects` file here ```

Your next.config.js file

`next.config.js` ```toml module.exports = { trailingSlash: true, } ```

Builds logs (or link to your logs)

Build logs ``` 3:10:14 PM: build-image version: d55944c047ef0aee2ac01971edde72cb2a50acfe (focal) 3:10:14 PM: build-image tag: v4.16.1 3:10:14 PM: buildbot version: abbb532f43aba2e093b26ceac3d8b53e7097bae8 3:10:14 PM: Fetching cached dependencies 3:10:14 PM: Starting to download cache of 574.3MB 3:10:19 PM: Finished downloading cache in 4.38786498s 3:10:19 PM: Starting to extract cache 3:10:22 PM: Finished extracting cache in 3.127894048s 3:10:22 PM: Finished fetching cache in 7.595130608s 3:10:22 PM: Starting to prepare the repo for build 3:10:22 PM: Preparing Git Reference refs/heads/master 3:10:22 PM: Parsing package.json dependencies 3:10:23 PM: Section completed: initializing 3:10:24 PM: Starting build script 3:10:24 PM: Installing dependencies 3:10:24 PM: Python version set to 2.7 3:10:24 PM: Started restoring cached node version 3:10:25 PM: Finished restoring cached node version 3:10:25 PM: v12.22.7 is already installed. 3:10:25 PM: Now using node v12.22.7 (npm v6.14.15) 3:10:25 PM: Started restoring cached build plugins 3:10:25 PM: Finished restoring cached build plugins 3:10:25 PM: Attempting ruby version 2.7.2, read from environment 3:10:26 PM: Using ruby version 2.7.2 3:10:26 PM: Using PHP version 8.0 3:10:26 PM: Started restoring cached yarn cache 3:10:27 PM: Finished restoring cached yarn cache 3:10:28 PM: No yarn workspaces detected 3:10:28 PM: Started restoring cached node modules 3:10:28 PM: Finished restoring cached node modules 3:10:28 PM: Installing NPM modules using Yarn version 1.22.19 3:10:28 PM: yarn install v1.22.19 3:10:28 PM: [1/4] Resolving packages... 3:10:28 PM: [2/4] Fetching packages... 3:10:28 PM: [3/4] Linking dependencies... 3:10:29 PM: [4/4] Building fresh packages... 3:10:29 PM: Done in 1.30s. 3:10:29 PM: NPM modules installed using Yarn 3:10:29 PM: Started restoring cached go cache 3:10:29 PM: Finished restoring cached go cache 3:10:29 PM: Installing Go version 1.17 (requested 1.17) 3:10:35 PM: unset GOOS; 3:10:35 PM: unset GOARCH; 3:10:35 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64'; 3:10:35 PM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}"; 3:10:35 PM: go version >&2; 3:10:35 PM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env" 3:10:35 PM: go version go1.17 linux/amd64 3:10:35 PM: Detected 1 framework(s) 3:10:35 PM: "next" at version "12.2.5" 3:10:35 PM: Installing missing commands 3:10:35 PM: Verify run directory 3:10:37 PM: ​ 3:10:37 PM: Netlify Build 3:10:37 PM: ──────────────────────────────────────────────────────────────── 3:10:37 PM: ​ 3:10:37 PM: ❯ Version 3:10:37 PM: @netlify/build 29.1.3 3:10:37 PM: ​ 3:10:37 PM: ❯ Flags 3:10:37 PM: baseRelDir: true 3:10:37 PM: buildId: 63a1fa7cf612fa0009bb5054 3:10:37 PM: deployId: 63a1fa7cf612fa0009bb5056 3:10:37 PM: ​ 3:10:37 PM: ❯ Current directory 3:10:37 PM: /opt/build/repo 3:10:37 PM: ​ 3:10:37 PM: ❯ Config file 3:10:37 PM: /opt/build/repo/netlify.toml 3:10:37 PM: ​ 3:10:37 PM: ❯ Context 3:10:37 PM: production 3:10:37 PM: ​ 3:10:37 PM: ❯ Using Next.js Runtime - v4.29.3 3:10:38 PM: ​ 3:10:38 PM: 1. @netlify/plugin-nextjs (onPreBuild event) 3:10:38 PM: ──────────────────────────────────────────────────────────────── 3:10:38 PM: ​ 3:10:38 PM: Next.js cache restored. 3:10:38 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed. 3:10:38 PM: ​ 3:10:38 PM: (@netlify/plugin-nextjs onPreBuild completed in 54ms) 3:10:38 PM: ​ 3:10:38 PM: 2. Build command from Netlify app 3:10:38 PM: ──────────────────────────────────────────────────────────────── 3:10:38 PM: ​ 3:10:38 PM: $ yarn build 3:10:38 PM: yarn run v1.22.19 3:10:38 PM: $ next build 3:10:39 PM: info - Linting and checking validity of types... 3:10:41 PM: info - Creating an optimized production build... 3:10:45 PM: info - Compiled successfully 3:10:45 PM: info - Collecting page data... 3:10:47 PM: info - Generating static pages (0/4) 3:10:47 PM: info - Generating static pages (1/4) 3:10:47 PM: info - Generating static pages (2/4) 3:10:47 PM: info - Generating static pages (3/4) 3:10:47 PM: info - Generating static pages (4/4) 3:10:48 PM: info - Finalizing page optimization... 3:10:48 PM: Route (pages) Size First Load JS 3:10:48 PM: ┌ ○ / 325 B 74.4 kB 3:10:48 PM: ├ /_app 0 B 74.1 kB 3:10:48 PM: ├ ○ /404 194 B 74.3 kB 3:10:48 PM: └ ○ /about 263 B 74.3 kB 3:10:48 PM: + First Load JS shared by all 74.7 kB 3:10:48 PM: ├ chunks/framework-5f4595e5518b5600.js 42 kB 3:10:48 PM: ├ chunks/main-7dfaec87f45da641.js 30.8 kB 3:10:48 PM: ├ chunks/pages/_app-b471eee8ccbf78ab.js 528 B 3:10:48 PM: ├ chunks/webpack-fd82975a6094609f.js 727 B 3:10:48 PM: └ css/b52e0d32efda9b9a.css 584 B 3:10:48 PM: ○ (Static) automatically rendered as static HTML (uses no initial props) 3:10:48 PM: Done in 9.63s. 3:10:48 PM: ​ 3:10:48 PM: (build.command completed in 9.7s) 3:10:48 PM: ​ 3:10:48 PM: 3. @netlify/plugin-nextjs (onBuild event) 3:10:48 PM: ──────────────────────────────────────────────────────────────── 3:10:48 PM: ​ 3:10:48 PM: { functionsDir: '/opt/build/repo/.netlify/functions-internal' } 3:10:48 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js 3:10:48 PM: Done 3:10:48 PM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js 3:10:48 PM: Done 3:10:48 PM: Moving static page files to serve from CDN... 3:10:48 PM: Moved 2 files 3:10:48 PM: Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable. 3:10:48 PM: Netlify configuration property "redirects" value changed to [ 3:10:48 PM: { from: '/_next/static/*', to: '/static/:splat', status: 200 }, 3:10:48 PM: { 3:10:48 PM: from: '/_next/image/*', 3:10:48 PM: query: { url: ':url', w: ':width', q: ':quality' }, 3:10:48 PM: to: '/_ipx/w_:width,q_:quality/:url', 3:10:48 PM: status: 301 3:10:48 PM: }, 3:10:48 PM: { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 }, 3:10:48 PM: { from: '/cache/*', to: '/404.html', status: 404, force: true }, 3:10:48 PM: { from: '/server/*', to: '/404.html', status: 404, force: true }, 3:10:48 PM: { from: '/serverless/*', to: '/404.html', status: 404, force: true }, 3:10:48 PM: { from: '/trace', to: '/404.html', status: 404, force: true }, 3:10:48 PM: { from: '/traces', to: '/404.html', status: 404, force: true }, 3:10:48 PM: { 3:10:48 PM: from: '/routes-manifest.json', 3:10:48 PM: to: '/404.html', 3:10:48 PM: status: 404, 3:10:48 PM: force: true 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/build-manifest.json', 3:10:48 PM: to: '/404.html', 3:10:48 PM: status: 404, 3:10:48 PM: force: true 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/prerender-manifest.json', 3:10:48 PM: to: '/404.html', 3:10:48 PM: status: 404, 3:10:48 PM: force: true 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/react-loadable-manifest.json', 3:10:48 PM: to: '/404.html', 3:10:48 PM: status: 404, 3:10:48 PM: force: true 3:10:48 PM: }, 3:10:48 PM: { from: '/BUILD_ID', to: '/404.html', status: 404, force: true }, 3:10:48 PM: { 3:10:48 PM: from: '/api/*', 3:10:48 PM: to: '/.netlify/functions/___netlify-handler', 3:10:48 PM: status: 200 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/*', 3:10:48 PM: to: '/.netlify/functions/___netlify-handler', 3:10:48 PM: status: 200, 3:10:48 PM: conditions: { Cookie: [Array] }, 3:10:48 PM: force: true 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/_next/data/CRpiNgunAUTscf_-6X6qP/index.json', 3:10:48 PM: to: '/.netlify/functions/___netlify-handler', 3:10:48 PM: status: 200, 3:10:48 PM: force: false 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/', 3:10:48 PM: to: '/.netlify/functions/___netlify-handler', 3:10:48 PM: status: 200, 3:10:48 PM: force: false 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/_next/data/CRpiNgunAUTscf_-6X6qP/about.json', 3:10:48 PM: to: '/.netlify/functions/___netlify-handler', 3:10:48 PM: status: 200, 3:10:48 PM: force: false 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/about', 3:10:48 PM: to: '/.netlify/functions/___netlify-handler', 3:10:48 PM: status: 200, 3:10:48 PM: force: false 3:10:48 PM: }, 3:10:48 PM: { 3:10:48 PM: from: '/*', 3:10:48 PM: to: '/.netlify/functions/___netlify-handler', 3:10:48 PM: status: 200 3:10:48 PM: } 3:10:48 PM: ]. 3:10:48 PM: ​ 3:10:48 PM: (@netlify/plugin-nextjs onBuild completed in 40ms) 3:10:48 PM: ​ 3:10:48 PM: 4. Functions bundling 3:10:48 PM: ──────────────────────────────────────────────────────────────── 3:10:48 PM: ​ 3:10:48 PM: Packaging Functions from .netlify/functions-internal directory: 3:10:48 PM: - ___netlify-handler/___netlify-handler.js 3:10:48 PM: - ___netlify-odb-handler/___netlify-odb-handler.js 3:10:48 PM: - _ipx/_ipx.js 3:10:48 PM: ​ 3:10:55 PM: ​ 3:10:55 PM: (Functions bundling completed in 7.4s) 3:10:55 PM: ​ 3:10:55 PM: 5. Edge Functions bundling 3:10:55 PM: ──────────────────────────────────────────────────────────────── 3:10:55 PM: ​ 3:10:55 PM: Packaging Edge Functions from .netlify/edge-functions directory: 3:10:55 PM: - ipx 3:10:56 PM: ​ 3:10:56 PM: (Edge Functions bundling completed in 869ms) 3:10:56 PM: ​ 3:10:56 PM: 6. @netlify/plugin-nextjs (onPostBuild event) 3:10:56 PM: ──────────────────────────────────────────────────────────────── 3:10:56 PM: ​ 3:10:56 PM: Next.js cache saved. 3:10:56 PM: ​ 3:10:56 PM: (@netlify/plugin-nextjs onPostBuild completed in 33ms) 3:10:56 PM: ​ 3:10:56 PM: 7. Deploy site 3:10:56 PM: ──────────────────────────────────────────────────────────────── 3:10:56 PM: ​ 3:10:56 PM: Starting to deploy site from '.next' 3:10:56 PM: Creating deploy tree 3:10:56 PM: 15 new files to upload 3:10:56 PM: 3 new functions to upload 3:11:04 PM: Section completed: deploying 3:11:04 PM: Site deploy was successfully initiated 3:11:04 PM: ​ 3:11:04 PM: (Deploy site completed in 7.7s) 3:11:04 PM: ​ 3:11:04 PM: Netlify Build Complete 3:11:04 PM: Starting post processing 3:11:04 PM: ──────────────────────────────────────────────────────────────── 3:11:04 PM: ​ 3:11:04 PM: (Netlify Build completed in 27.3s) 3:11:04 PM: Post processing - HTML 3:11:04 PM: Caching artifacts 3:11:04 PM: Started saving node modules 3:11:04 PM: Finished saving node modules 3:11:04 PM: Started saving build plugins 3:11:04 PM: Finished saving build plugins 3:11:04 PM: Started saving yarn cache 3:11:04 PM: Post processing - header rules 3:11:05 PM: Post processing - redirect rules 3:11:05 PM: Post processing done 3:11:05 PM: Section completed: postprocessing 3:11:06 PM: Finished saving yarn cache 3:11:06 PM: Started saving pip cache 3:11:06 PM: Finished saving pip cache 3:11:06 PM: Started saving emacs cask dependencies 3:11:06 PM: Finished saving emacs cask dependencies 3:11:06 PM: Started saving maven dependencies 3:11:06 PM: Finished saving maven dependencies 3:11:06 PM: Started saving boot dependencies 3:11:06 PM: Finished saving boot dependencies 3:11:06 PM: Started saving rust rustup cache 3:11:06 PM: Finished saving rust rustup cache 3:11:06 PM: Started saving go dependencies 3:11:06 PM: Finished saving go dependencies 3:11:06 PM: Build script success 3:11:06 PM: Section completed: building 3:11:08 PM: Uploading Cache of size 566.7MB 3:11:09 PM: Site is live ✨ 3:11:12 PM: Section completed: cleanup 3:11:12 PM: Finished processing build request in 58.303999101s ```

Function logs

Function logs ``` # Paste logs here ```

.next JSON files

generated .next JSON files ``` # Paste file contents here. Please check there isn't any private info in them # You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time. ```
thomasryu commented 1 year ago

Any update on this?

nickytonline commented 1 year ago

Hi @thomasryu. This should be working. We have tests for it. Here's the config for one of our test sites with it enabled. https://github.com/netlify/next-runtime/blob/main/demos/default/next.config.js#L42

If you've installed the Netlify Next runtime explicitly in your pacakge.json, upgrade to the latest. Otherwise, if you deploy it should pick up the latest Netlify Next runtime.

thomasryu commented 1 year ago

Hey @nickytonline, I really don't know what to say, I've further trimmed my linked GitHub project down to see if I can pinpoint the problem, but it just doesn't seem work.

Right now, my config file is literally just the trailingSlash: true option.

And after the cleanup, Netlify is even going on the opposite direction and stripping the trailing slash away (e.g.: https://spiffy-sundae-34f3ed.netlify.app/about/).

For reference, I've ran built this same barebones project locally and uploaded it to Vercel and both works as intended :/

PFJoey commented 1 year ago

We are also experiencing the same issue as @thomasryu.

hk86 commented 1 year ago

Same issue for me. Was anyone able to solve it?

sarahetter commented 1 year ago

Closing as duplicate https://github.com/netlify/next-runtime/issues/998