From e2e091f2e1cd97828cd0c7014800145ecd7e7142 Mon Sep 17 00:00:00 2001
From: Alaister Young <10985857+alaister@users.noreply.github.com>
Date: Fri, 8 May 2026 15:39:35 +0800
Subject: [PATCH] Revert "feat(studio): finish 404 migration (body move, drop
 pages/404.tsx)"

This reverts commit 3db8fd7d6b1abb88607f4b534707b83e80454ec6.
---
 apps/studio/TANSTACK_MIGRATION.md             |  2 +-
 .../ui/NotFound.tsx => pages/404.tsx}         | 34 ++++++++++++-------
 apps/studio/routes/__root.tsx                 |  6 +++-
 3 files changed, 28 insertions(+), 14 deletions(-)
 rename apps/studio/{components/ui/NotFound.tsx => pages/404.tsx} (68%)

diff --git a/apps/studio/TANSTACK_MIGRATION.md b/apps/studio/TANSTACK_MIGRATION.md
index 8b4a4852cbb..b6dae4af540 100644
--- a/apps/studio/TANSTACK_MIGRATION.md
+++ b/apps/studio/TANSTACK_MIGRATION.md
@@ -310,7 +310,7 @@ These are the layout-only TanStack files. Most hold a single product layout comp
 
 ### Error pages (handled at root)
 
-- [x] A→done `__root.tsx` — `notFoundComponent` wired to `components/ui/NotFound.tsx` (body moved out of `pages/404.tsx`, Next file deleted, `next/link` + `next/legacy/image` swapped for native equivalents)
+- [x] A `__root.tsx` — wired `notFoundComponent` to `pages/404.tsx`
 - [ ] `__root.tsx` — wire `errorComponent` for `pages/500.tsx` / `_error.jsx`
 
 ---
diff --git a/apps/studio/components/ui/NotFound.tsx b/apps/studio/pages/404.tsx
similarity index 68%
rename from apps/studio/components/ui/NotFound.tsx
rename to apps/studio/pages/404.tsx
index 3609ecf7fe3..4e3294aac23 100644
--- a/apps/studio/components/ui/NotFound.tsx
+++ b/apps/studio/pages/404.tsx
@@ -1,31 +1,39 @@
-import { Link } from '@tanstack/react-router'
+import { NextPage } from 'next'
 import { useTheme } from 'next-themes'
+import Image from 'next/legacy/image'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Button } from 'ui'
 
 import { BASE_PATH } from '@/lib/constants'
 
-export function NotFound() {
+const Error404: NextPage = ({}) => {
   const { resolvedTheme } = useTheme()
-  const [show404, setShow404] = useState(false)
+  const [show404, setShow404] = useState<boolean>(false)
 
   useEffect(() => {
-    const id = window.setTimeout(() => setShow404(true), 500)
-    return () => window.clearTimeout(id)
+    setTimeout(() => {
+      setShow404(true)
+    }, 500)
   }, [])
 
-  const logoSrc = resolvedTheme?.includes('dark')
-    ? `${BASE_PATH}/img/supabase-dark.svg`
-    : `${BASE_PATH}/img/supabase-light.svg`
-
   return (
     <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
       <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
         <nav className="relative flex items-center justify-between sm:h-10">
           <div className="flex shrink-0 grow items-center lg:grow-0">
             <div className="flex w-full items-center justify-between md:w-auto">
-              <Link to="/projects">
-                <img src={logoSrc} alt="supabase" height={24} width={120} />
+              <Link href="/projects">
+                <Image
+                  src={
+                    resolvedTheme?.includes('dark')
+                      ? `${BASE_PATH}/img/supabase-dark.svg`
+                      : `${BASE_PATH}/img/supabase-light.svg`
+                  }
+                  alt="supabase"
+                  height={24}
+                  width={120}
+                />
               </Link>
             </div>
           </div>
@@ -51,10 +59,12 @@ export function NotFound() {
         </div>
         <div className="flex items-center space-x-4">
           <Button asChild size="small">
-            <Link to="/projects">Head back</Link>
+            <Link href="/projects">Head back</Link>
           </Button>
         </div>
       </div>
     </div>
   )
 }
+
+export default Error404
diff --git a/apps/studio/routes/__root.tsx b/apps/studio/routes/__root.tsx
index 94c8204f219..16db833c42e 100644
--- a/apps/studio/routes/__root.tsx
+++ b/apps/studio/routes/__root.tsx
@@ -65,7 +65,6 @@ import { UpdateBillingAddressModal } from '@/components/interfaces/App/UpdateBil
 import { MainScrollContainerProvider } from '@/components/layouts/MainScrollContainerContext'
 import { BannerStackProvider } from '@/components/ui/BannerStack/BannerStackProvider'
 import { GlobalErrorBoundaryState } from '@/components/ui/ErrorBoundary/GlobalErrorBoundaryState'
-import { NotFound } from '@/components/ui/NotFound'
 import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { AuthProvider } from '@/lib/auth'
@@ -73,6 +72,7 @@ import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from '@/lib/const
 import { ProfileProvider } from '@/lib/profile'
 import { Telemetry } from '@/lib/telemetry'
 import { Toaster } from '@/lib/toaster'
+import Error404 from '@/pages/404'
 import { AiAssistantStateContextProvider } from '@/state/ai-assistant-state'
 
 dayjs.extend(customParseFormat)
@@ -249,6 +249,10 @@ const errorBoundaryHandler = (error: Error, info: ErrorInfo) => {
   console.error(error.stack)
 }
 
+function NotFound() {
+  return <Error404 />
+}
+
 export const Route = createRootRouteWithContext<RouterContext>()({
   head: buildRootHead,
   component: RootComponent,