fix: render devtools only in dev

web/src/components/DevTools.tsx

@@ -0,0 +1,19 @@
+import { lazy } from 'react'
+
+export const TanStackRouterDevtools = process.env.NODE_ENV === 'production'
+  ? () => null
+  : lazy(() =>
+    import('@tanstack/router-devtools').then((res) => ({
+      default: res.TanStackRouterDevtools,
+      // For Embedded Mode
+      // default: res.TanStackRouterDevtoolsPanel
+    }))
+  )
+
+export const ReactQueryDevtools = process.env.NODE_ENV === 'production'
+  ? () => null
+  : lazy(() =>
+    import('@tanstack/react-query-devtools').then((res) => ({
+      default: res.ReactQueryDevtools,
+    }))
+  )

web/src/components/Layout.tsx

@@ -1,8 +1,7 @@
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { Outlet } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { ReactQueryDevtools, TanStackRouterDevtools } from 'c/DevTools'
+import { Footer } from 'c/Footer'
 import { Header } from 'c/Header'
-import { Footer } from './Footer'
 
 export function Layout() {
   return (