feat(gatsby-theme-i18n): Add "prefixDefault" option

[LekoArts]

You can try this out by installing the canary 1.0.5-defaultprefix on npm.

---

This adds a prefixDefault option to gatsby-theme-i18n. Currently this will create /en/ instead of / if e.g. en is the default language.

[tmskrtsz]

I dropped it into my existing project and it seems to not have broken anything. I removed my own implementation and will continue using this revision. I'll report back if there is anything amiss 👍

[philschonholzer]

@LekoArts The prefixDefault is working for me also.

The question that I have: What is the strategy if a route without a prefix is opened? Now you just get a empty page. Can I do anything about that? It would be perfect if the user would be rerouted to the matching lang in that case. Like if a person with the browser lang set to German clicks an a link to www.product.com/landingpage is rerouted to www.product.com/de/landingpage. Can I get this behaviour already somehow?

[LekoArts]

@philschonholzer Sure, you can do something about that!
I don't really feel comfortable putting a baked-in solution into the theme itself as it totally depends on preferences and overall stack/setup.

If you read the "Automating the process of adding locale-based redirects." part of this medium blog post you have the option of server redirects:

This is a “server-thing” and relates to parsing the Accept-Language header and creating proper redirect rules out of it. Gatsby is not able to handle it alone, since, as mentioned, it has no notion of a server. Interestingly enough though, Gatsby has an API for creating redirects called createRedirect() which we can use inside our gatsby-node.js. We can use this API to “publish” our intent of creating a redirect from one page to another. It’s up to the server-side technology to “subscribe” to these intents and create redirect rules. In short Gatsby says “I’ll log when the developer wants to create a redirect” and someone else must say “I’ll read those logs and create redirect rules”. Plugins like gatsby-plugin-netlify or gatsby-plugin-s3 do just that. The Netlify one creates a _redirects file in your build directory which contains all the redirect rules (as read through your createRedirect calls throughout your gatsby-node.js) in a way that Netlify understands them. We will leverage that to create server-side redirects for the production website, while also creating browser-side javascript redirects for development, so that localhost:8000/about can redirect correctly to localhost:8000/en/about . To do that, we add gatsby-plugin-netlify to gatsby-config.jsand modify our gatsby-node.js to the following:

But if you look at gatsby-plugin-intl that uses browser-lang you can also use redirects in the browser.

I'm definitely open for adding documentation around this to the README (and docs later) though.

[LiamDotPro]

Hey @LekoArts I tried out this pull request and it fixes the exact issue I've been trying to figure out for an hour or two, is there an eta for this to be merged? Is there anything else I can do to help with getting this there?

[LekoArts]

Published in gatsby-theme-i18n@1.0.5