i18n: language switch works on dev server, but built links may include double leading slash

[Because789]

Astro Info

Astro                    v4.5.12
Node                     v20.11.1
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I have a simple language switch:

const currentLanguage = Astro.currentLocale;
const currentURL = Astro.url.pathname;

const getOtherLanguageLink = (currentURL: string, currentLanguage: string) => {
    return currentLanguage === "de"
        ? `/en${currentURL}`
        : currentURL.replace(/^\/en/, "");
};

It works without issues in dev mode, but when I build the site, I get double leading slashes under some circumstances.

Usage of minimal repro

• When dev server is up, navigate to /en/about (click "EN", then "about page")
• When you now click "DE", it switches back to /about as expected
• Stop dev server and npm run build && npm run preview
• Navigate again to /en/about, the "DE" link is now broken: https://about/. dist/en/about/index.html includes the link a href="//about/"> DE </a, all the other language switch links created are correct.

This might be related to #10621, since I get it in the same project.

What's the expected result?

Build should produce the correct link.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-fs5dhp?file=src%2Fcomponents%2FLanguageSwitch.astro

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

I can't tell if there's an issue here with one of our i18n APIs or if it's a bug in your code. Which Astro API seems to be the problem?

[matthewp]

Look at it more, it looks like the reason you are getting the extra / is because your getStaticPaths is including it as the param. You want to include the locale in your params without the slashes. Then you'll get what you expect:

https://stackblitz.com/edit/withastro-astro-grk1e6?file=src%2Fpages%2F[...lang]%2Fabout.astro,src%2Fpages%2F[...lang]%2Findex.astro,src%2Fcomponents%2FLanguageSwitch.astro

[Because789]

Thanks, @matthewp! Yeah, that makes sense and works. What really makes no sense to me at all is, why this introduces trailing slashes to the urls?!? When I build your edit (not in dev server), the language switch links have all trailing slashes:

dist/index.html --> href="/en/"
dist/about/index.html --> href="/en/about/"
dist/en/about/index.html --> href="/about/"

These links are built with Astro.url.pathname, why is removing slashes in getStaticPaths params adding one to the end of Astro.url.pathname? Am I missing something simple again?

[matthewp]

It's because the param gets turned into the url so that [...locale]/about.astro when the locale is en/ becomes /en//about. Slashes can be part of a param, it's how people create highly dynamic pages. But in your case you don't want it.

[Because789]

I got that, but I don't get why there is suddenly a slash at the end of URLs when I build your example.

[Because789]

Found your answer: #4638 (comment)

For the record:

Setting build.format controls what Astro.url is set to during the build. When it is 'directory' (the default value), the Astro.url.pathname will include a trailing slash to mimic folder behavior; ie /foo/ (see docs).

Still weird, that it didn't add a trailing slash when my getStaticPaths function was buggy, but only when it was fixed. Anyway, moving on.