Netlify's rewrite rule doesn't work with fallback pages

[tciesek]

Describe the bug
Netlify's rewrite rule doesn't work with fallback pages. It returns 404.

To Reproduce
Steps to reproduce the behavior:

1. Create next.js app with path like: /posts/:id with fallback: true
2. Set rewrite rule in _redirects file /posts/:id/:slug /posts/:id 200
3. Deploy to netlify
4. Go to: /posts/1 -> page is rendered
5. Go to: /posts/1/seo-friendly-name -> page is NOT rendered and we get 404

Expected behavior
The fallback page is rendered correctly for rewrite rules.

Versions

• Next.js: 10.1.3
• plugin: 3.4.2

If you're using file-based installation

• netlify.toml:

[build]
  command = "next build"
  publish = "out"

[[plugins]]
  package = "@netlify/plugin-nextjs"

[context.production.environment]
  NEXT_SERVERLESS = "true"
  NODE_ENV = "production"

[lindsaylevine]

@tciesek hey! apologies you're running into this! so unfortunately there's a reason why this doesn't work, and i'll do my best to explain it:

for a page that uses fallback: true, this plugin generates a few necessary redirects, including:
/getStaticProps/withFallback/:id /.netlify/functions/next_getStaticProps_withFallback_id 200

this redirect is what guarantees that a fallback page gets SSR'd (now served by an ODB so the first response is cached). in your case, we'd generate something like /posts/:id /.netlify/functions/next_posts_id 200.

worth mentioning that a user's _redirects will always come before the plugin's redirects, but that's not related to the issue here. the issue is that a redirect like /posts/:id/:slug /posts/:id 200 on netlify.toml would depend on the existence of static files at /posts/:id; we'd never hit the serverless function because netlify only processes one 200 redirect at a time and we'd nver get to the plugin-generated redirect that takes us to the required serverless function.

all that said, what you can try is to change your redirect to /posts/:id/:slug /posts/:id 301! which would allow passage to the plugin-generated redirect, but this would drop :slug from the url. if you need :slug let me know and we can figure something else out.

lmk if that works and also lmk if we can document any of this clearer for people in the future who may try to add similar redirects/rewrites of their own!

[surjithctly]

Have similar issue redirecting / to /home discussed here: https://answers.netlify.com/t/next-js-rewrites-not-working/40017

And can you explain why third party link works (eg: the same copy hosted outside netlify - http://samesite.com/home) but not local path /home

Can't netlify treat this as third party and return what that page returns?

[lindsaylevine]

hey @surjithctly! just read that whole thread; sorry for the struggles :'(. i know it's confusing so like i said to @tciesek, i'm totally open to feedback about how we can better document/improve this.

the reason why / can't be rewritten to /home is because, like our support eng wrote, there is no home.html. for 200s, netlify only processes one redirect at a time. so it tries to process that, sees there is no home(.html) and fails, instead of what one might expect, which would be to go look for a /home redirect or another matching redirect, which in your case is /:slug (per https://aws1.discourse-cdn.com/netlify/original/3X/5/d/5d42287db865c69854cd80e4a5f9eac344527c93.png). for third party sites, the 200 will always "succeed" in that we'll always be able to take you to a third party site, whereas you may not always have html available at an internal route.

did you try / /home 301!? i understand that's not what you want (you just want a rewrite) but that should at least take you to home.

unfortunately i think the ease of behavior you're looking for just can't be supported with next on netlify, when routes have to be rewritten to /.netlify/functions/whatever. to get your desired outcome, you could try adding

/ /.netlify/functions/next_slug 200

and try to check for that slug === / case within your page. not sure if slug would even come in as anything in that case (maybe undefined?) but id play around with it.

lmk if anything doesnt make sense!

[tciesek]

Thanks, @lindsaylevine. Adding a redirect is not an option - I need a full slug for SEO and readable link, but I managed to find another solution. I've set up a catch-all route like /posts/[id]/[[...slug]]. This way I'm prerendering the paths with full slug and I got a fallback function for changed slugs or new resources.

lmk if that works and also lmk if we can document any of this clearer for people in the future who may try to add similar redirects/rewrites of their own!

Maybe you could add a warning in the build message when rewrite paths overlap?

[lindsaylevine]

@tciesek got it, makes sense. i'm glad you were able to come up with that solution!! 🙏

re: a warning, that's a great idea! i'll def run it by the team. i'm also thinking that, if a user has any custom rewrites/redirects of their own, that we could log something that warns about how certain page types require redirects to their corresponding serverless function and how that could conflict with their custom redirects, maybe link to docs or something. appreciate the feedback!!! 🙏

[surjithctly]

@lindsaylevine You said its because home is not available. But in my code I have given getStaticProps & getStaticPaths which includes /home So it says next to pre-render all pages. In that case page should be available after build.

But I guess this plugin does not prerender getStaticProps. Why? That is one big benefit of using Next.js.

Another option is to consider /home as third-party and render it. So in the background this rediect would call external site with /home and returns the data. Is that possible?

Thanks so much for your help. really appreciate it.

[lindsaylevine]

@surjithctly can you share your getStaticPaths function with us? if you could provide a repo that'd be even better so i can see exactly what's going on in your case. if what you're saying is true, that home.html does exist, then i'm not sure what the issue is.

[surjithctly]

I have did a test using netlify build and yarn build, both using target serverless, and also fallback:false.

But netlify build does not contain static HTML files, where as yarn build has every files in the serverless option.

My assumption is that once next build is able to generate static HTML, it would work. ie SSG

[lindsaylevine]

@surjithctly can you share your repo with me? i'd love to see for myself what's going on

[surjithctly]

Here's the static paths:

export async function getStaticPaths() {
  const allPages = await client.fetch(pagequery);
  return {
    paths:
      allPages?.map(page => ({
        params: {
          slug: page.slug
        }
      })) || [],
    fallback: false
  };
}

Netlify Out Folder

next Build: .next/serverless/pages

[surjithctly]

Given access to the repo. @lindsaylevine

[lindsaylevine]

@surjithctly can you try commenting out the revalidate setting?

[surjithctly]

Thanks, that worked. So I guess the issue is with the ISR? I can see the ISR issue is open.

Is this going to fix this rewrite issue once ISR is supported?