fix: params.locale fallback on [locale]/ route mismatch (#183)

# Changes

404 route didn't have Astro.params.locale defined, causing problems in
projects that rely on it, like in Internal Link.
This PR fixes that issue on a middleware level.

# Associated issue

N/A

# How to test

1. Open preview link
2. Navigate to /nl/aapje/ and verify locale is set to NL
3. Navigate to /en/aapje/ and verify locale is set to EN
4. Navigate to /aapje/ and verify locale is set to EN

# Checklist

- [x] I have performed a self-review of my own code
- [x] I have made sure that my PR is easy to review (not too big,
includes comments)
- ~~I have made updated relevant documentation files (in project README,
docs/, etc)~~
- ~~I have added a decision log entry if the change affects the
architecture or changes a significant technology~~
- [x] I have notified a reviewer

<!-- Please strike through and check off all items that do not apply
(rather than removing them) -->

src/middleware.ts

@@ -1,5 +1,5 @@
 import { defineMiddleware, sequence } from 'astro/middleware';
-import { setLocale } from './lib/i18n';
+import { defaultLocale, locales, setLocale } from './lib/i18n';
 import type { SiteLocale } from '@lib/i18n.types';
 import { datocmsEnvironment } from '../datocms-environment';
 import { getSecret } from 'astro:env/server';
@@ -20,10 +20,18 @@ export const datocms = defineMiddleware(async ({ locals }, next) => {
   return repsonse;
 });
 
-const i18n = defineMiddleware(async ({ params }, next) => {
-  if (params.locale) {
-    setLocale(params.locale as SiteLocale);
+const i18n = defineMiddleware(async ({ params, request }, next) => {
+  if (!params.locale) {
+    // if the locale param is unavailable, it didn't match a [locale]/* route
+    // so we attempt to extract the locale from the URL and fallback to the default locale
+    const pathLocale = new URL(request.url).pathname.split('/')[1];
+    const locale = locales.includes(pathLocale as SiteLocale)
+      ? pathLocale
+      : defaultLocale;
+    Object.assign(params, { locale });
   }
+  setLocale(params.locale as SiteLocale);
+
   const repsonse = await next();
   return repsonse;
 });

src/pages/404.astro

@@ -5,7 +5,6 @@ import type {
   NotFoundPageRecord,
 } from '@lib/types/datocms.d.ts';
 import { datocmsRequest } from '@lib/datocms';
-import { defaultLocale, locales } from '@lib/i18n';
 import { noIndexTag, titleTag } from '@lib/seo';
 import Layout from '@layouts/Default.astro';
 import Blocks from '@blocks/Blocks.astro';
@@ -16,21 +15,14 @@ export const prerender = false;
 
 Astro.response.status = 404;
 
-// The Astro.params.locale is unavailabe in this route,
-// so we need to extract it from the URL instead:
-const url = new URL(Astro.request.url);
-const pathLocale = url.pathname.split('/')[1];
-const locale = locales.includes(pathLocale as SiteLocale)
-  ? pathLocale
-  : defaultLocale;
-
+const { locale } = Astro.params as { locale: SiteLocale };
 const { page } = (await datocmsRequest<NotFoundPageQuery>({
   query,
   variables: { locale },
 })) as { page: NotFoundPageRecord };
 ---
 
 <Layout pageUrls={[]} seoMetaTags={[noIndexTag, titleTag(page.title)]}>
-  <h1>{page.title}</h1>
+  <h1>{page.title} {Astro.params.locale}</h1>
   <Blocks blocks={page.bodyBlocks as AnyBlock[]} />
 </Layout>