Preview: Catch-all page at root level catches requests for NextJS static assets

[joostmeijles]

I have the following (minimal) example:

// pages/api/preview.js
export default async (req, res) => {
  return res.status(404).json({ message: 'Not found' })
}

////////////////////

// pages/index.js
import Link from 'next/link'

function IndexPage() {
  return <Link href='/mypage'><a>My page</a></Link>
}

export async function getStaticProps() {
  return {
    props: {}
  }
}

export default IndexPage

////////////////////

// pages/[...slug].js
const SlugPage = () => {
  return null
}

export async function getStaticProps({params: {slug}}) {
  console.log(`slug = ${slug}`)

  return {
    props: {}
  }
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true
  };
}

export default SlugPage

When I run this example using netlify dev I get an invalid getStaticProps parameter value for slug: _next,static,chunks,pages,[...slug]-0ab994ad29aa8a4f0aaa.js.

The full output is:

◈ Rewrote URL to /.netlify/functions/next_slug
Request from ::1: GET /.netlify/functions/next_slug
info  - Loaded env from .env
[request] /_next/static/chunks/pages/%5B...slug%5D-0ab994ad29aa8a4f0aaa.js
slug = _next,static,chunks,pages,[...slug]-0ab994ad29aa8a4f0aaa.js
Response with status 200 in 225 ms.
Request from ::1: GET /.netlify/functions/next_slug
[request] /_next/data/vAFu7puWIo_lpacbTliex/mypage.json
slug = mypage
Response with status 200 in 54 ms.

Is this a bug?

NB. the <Link> element is necessary to trigger the behaviour.

[FinnWoelm]

Interesting scenario!

You have a catch-all route at root-level — it catches all paths: /whatever/path/...

The request at [request] /_next/static/chunks/pages/%5B...slug%5D-0ab994ad29aa8a4f0aaa.js is where NextJS is trying to load the page's code. If you look under out_publish/_next/..., you should find this JS file. But rather than loading the code file, the request is being re-routed to the catch-all page instead. That's why you get all the path segments when you console.log the slug.

Because of shadowing, your request for /_next/static/... should not be rewritten to the [...slug].js page. So there's definitely an issue here and I'm happy to get to the bottom of it.

If you have time, the following would be extremely helpful:

• What version of netlify-cli are you on (netlify --version)? If it's not v2.63.2 (latest), can you upgrade?
• Do you have time to create a mini repo with these three pages for me to clone?
• Does the code work on netlify.com?

[joostmeijles]

I am using the following netlify-cli version: netlify-cli/2.63.2 darwin-x64 node-v13.7.0 and created this https://github.com/joostmeijles/next-on-netlify-catchall-bug mini repo.

The site is deployed here: https://friendly-babbage-dcd353.netlify.app/, but I don't know how to see the same logging.

[FinnWoelm]

That's a bug in netlify dev! reqUrl.pathname should be wrapped in decodeURIComponent() in:

https://github.com/netlify/cli/blob/c4ce6bba298ab3c7deb0d5b409e9c36ff21fd3da/src/utils/proxy.js#L149

You can create an issue or PR in netlify dev, if you want. A quick workaround in the meantime is to add a custom redirect to your NextJS app by adding a _redirects file to your project root:

/_next/* /_next/:splat 200

This redirect will become the first redirect in your list of Netlify redirects and catch all the requests for NextJS static assets.

[cassidoo]

I'll make a PR for this @FinnWoelm, thanks for finding that!!

[FinnWoelm]

Awesome! 🙌 😊 I already have a sample repo https://github.com/FinnWoelm/netlify-uri-bug, in case it's helpful.

[erezrokah]

The CLI fix is released in the latest CLI version - v2.63.3, thanks @cassidoo and @FinnWoelm. Please let me know if you're experiencing other issues.

[joostmeijles]

Tested, works as a charm!

Thanks for the prompt fix over the weekend 🚀