diff --git a/packages/astro/src/i18n/middleware.ts b/packages/astro/src/i18n/middleware.ts
index c2805b1a32..6ee87606cd 100644
--- a/packages/astro/src/i18n/middleware.ts
+++ b/packages/astro/src/i18n/middleware.ts
@@ -31,7 +31,7 @@ export function createI18nMiddleware(
 	const _requestHasLocale = requestHasLocale(payload.locales);
 	const _redirectToFallback = redirectToFallback(payload);
 
-	const prefixAlways = (context: APIContext): Response | undefined => {
+	const prefixAlways = (context: APIContext, response: Response): Response | undefined => {
 		const url = context.url;
 		if (url.pathname === base + '/' || url.pathname === base) {
 			return _redirectToDefaultLocale(context);
@@ -39,7 +39,7 @@ export function createI18nMiddleware(
 
 		// Astro can't know where the default locale is supposed to be, so it returns a 404.
 		else if (!_requestHasLocale(context)) {
-			return _noFoundForNonLocaleRoute(context);
+			return _noFoundForNonLocaleRoute(context, response);
 		}
 
 		return undefined;
@@ -124,7 +124,7 @@ export function createI18nMiddleware(
 			}
 
 			case 'pathname-prefix-always': {
-				const result = prefixAlways(context);
+				const result = prefixAlways(context, response);
 				if (result) {
 					return result;
 				}
@@ -132,7 +132,7 @@ export function createI18nMiddleware(
 			}
 			case 'domains-prefix-always': {
 				if (localeHasntDomain(i18n, currentLocale)) {
-					const result = prefixAlways(context);
+					const result = prefixAlways(context, response);
 					if (result) {
 						return result;
 					}
diff --git a/packages/astro/test/i18n-routing.test.js b/packages/astro/test/i18n-routing.test.js
index 27491069d3..8075d7e52d 100644
--- a/packages/astro/test/i18n-routing.test.js
+++ b/packages/astro/test/i18n-routing.test.js
@@ -152,11 +152,22 @@ describe('[DEV] i18n routing', () => {
 		it("should NOT render the default locale if there isn't a fallback and the route is missing", async () => {
 			const response = await fixture.fetch('/it/start');
 			assert.equal(response.status, 404);
+			const html = await response.text();
+			assert.match(html, /Can't find the page you're looking for./);
 		});
 
 		it("should render a 404 because the route `fr` isn't included in the list of locales of the configuration", async () => {
 			const response = await fixture.fetch('/fr/start');
 			assert.equal(response.status, 404);
+			const html = await response.text();
+			assert.match(html, /Can't find the page you're looking for./);
+		});
+
+		it('should render the custom 404.astro when navigating non-existing routes ', async () => {
+			const response = await fixture.fetch('/does-not-exist');
+			assert.equal(response.status, 404);
+			const html = await response.text();
+			assert.match(html, /Can't find the page you're looking for./);
 		});
 	});