diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 25662afd..32f0e3d4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
import { useEffect, type ReactElement } from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { LandingPage } from './pages/LandingPage';
import { EditorPage } from './pages/EditorPage';
import { ExamplesPage } from './pages/ExamplesPage';
@@ -90,6 +90,20 @@ const ROUTES: { path: string; element: ReactElement; index?: boolean }[] = [
// pro overlay (project persistence + public profiles are pro features).
];
+/**
+ * The default locale (English) is served at the root with NO `/en` prefix, so
+ * `/en/...` matches no route and renders blank. People reasonably guess `/en/`
+ * by analogy with `/es/`, `/zh-cn/`, … — redirect them to the prefix-free path
+ * (`/en/project/x` → `/project/x`, `/en` → `/`) instead of a blank page. This
+ * keeps the canonical no-prefix English URLs (good for SEO) while handling the
+ * guessed ones gracefully.
+ */
+function EnPrefixRedirect() {
+ const { pathname, search, hash } = useLocation();
+ const stripped = pathname.replace(/^\/en(?=\/|$)/, '');
+ return ;
+}
+
function App() {
// Pro overlay registers extra routes (login, register, admin, profile,
// project-by-slug, …) via registerProRoutes() inside mountPro(). The
@@ -144,6 +158,10 @@ function App() {
)}
))}
+
+ {/* `/en/...` is the default locale spelled out — redirect to the
+ canonical prefix-free path instead of rendering a blank page. */}
+ } />