404 multi-lang redirect on Netlify + Next.js

Support
,
1

Currently, our 404 pages just hit the natural netlify 404 template. I’ve set up a 404 template in pages/404.js and it works great on dev.

However, on staging (staging.quartexxmanagement.com), I have it set up with a redirect based on a recommendation I found which almost works.
/en/* /en/404.html 404

The issue I believe I’m having is that because the site is set up to in the future handle english and french, it builds everything to /en/ currently.

Any non-existent page, like staging.quartexxmanagement.com/test should redirect to 404 but to trigger the 404 you have to hit staging.quartexxmanagement.com/en/test

quartexxmanagement.netlify.app

3

Hey there, @rileymacisaac :wave:

Thanks so much for reaching out. Sorry to hear you have encountered difficulties. Could you please share your full redirects file or netlify.toml so that we can look into this further?

In the case that this is a language based redirect, we do have some resources for you to look into. Take a look below:

1 Like
4

Hey Hilary,

Thanks for reahcing out.

netlify.toml

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

[plugins.inputs]
buildDir = "en"
filePath = "../sitemap.xml"

[context.branch-deploy]
command = "next build && cp _staging_headers public/_headers"

_redirects

/en/* /en/404.html 404
5

Hi @rileymacisaac,

Has something changed meanwhile? I’m not seeing the redirect you’ve mentioned here.

6

Hi! I’ve been testing this on the staging branch as mentioned in my initial post.

The redirects do not exist on prod as I want to ensure they work before pushing to prod.

7

Oh yeah, sorry about that.

So, why don’t you change the rule to /* /en/404.html 404?

8

Hi, when I implement that it 404s everything. https://staging.quartexxmanagement.com/

Because of multi-lang set-up, content seems to be built in /en/. When I add french (which will be soon) I assume that there will be a new root directory for /fr/.,

9

I wonder if the issue would persist on prod? Would the branch domain (staging.quartexxmanagement.com) be the issue? I can’t see it being the issue but i’m curious.

10

I just checked and it doesn’t look like it’s 404ing everything. There’s no index.html in your deploy. You’re probably rendering it on server side by using Netlify Functions. However, if you try https://staging.quartexxmanagement.com/en, it loads the page correctly.

So the rule works correctly, but it won’t be able to distinguish between pages that don’t exist and pages that are rendered on the fly.

11

Hi, i’m using Next on Netlify plugin to render it serverless. Can you recommend a path forward by chance?

12

Hi @rileymacisaac,

Unfortunately, there’s no way for files rendered server-side. For the redirect rule to work, you’d have to make sure the static version of the files exist.

But I believe, there’s another way from within Next.js to set a custom 404 page - I’m not sure, but I think I’ve seen such a setup somewhere. I am not a Next.js user myself, so can’t confirm, but I’ll roll this to the team to see if they have any other suggestions.

14

Hey there!

Perhaps you’ll be interested in seeing how a statically generated 404 page can exist on an otherwise SSR’d site: Making a custom 404 page in Next.js

15

Hey Scott, I’ve actually already read and followed that post. I appreciate the response.

The custom 404 page works without issues on my dev environment. After build, the multi-lang structure is what creates the issues.

I need a way to redirect any 404 to /en/404 or /fr/404 (fr isn’t supported yet but will be soon)

16

Hey @hrishikesh, my site is actually all static I believe. (SSG). Does this change anything?

18

Hi @rileymacisaac,

I’m confused.

Here you say you’re rendering it server-side.

Here you believe your site is probably static.

It has to be one of those - can’t be both. From what I checked, your last deploy was on October 4, so it’s still the same as the one I talked about last time and it’s rendering server-side - not static.

With your current setup, there’s a workaround for you though - however it might not be very acceptable. But here you go. You could create a static 404.html in your publish directory and Netlify will automatically show that page for all 404 assets without any redirect needed. The problem with that is, you won’t get language specific 404 pages - it would be same page for the entire website. But there’s a workaround for that:

You could setup language or country based redirects on that 404.html page so you could try and get the behaviour you need. But the problem with that is, 404 assets would return a status code of 301/302 to browsers/search-engines, etc. The end user might not notice it as they’ll see the 404 page, but the tools might be confused.

1 Like