create-better-t-stack 3.11.0 → 3.12.0

package/templates/examples/ai/native/bare/app/(drawer)/ai.tsx.hbs

@@ -314,9 +314,10 @@ import { Ionicons } from "@expo/vector-icons";
 import { Container } from "@/components/container";
 import { useColorScheme } from "@/lib/use-color-scheme";
 import { NAV_THEME } from "@/lib/constants";
+import { env } from "@{{projectName}}/env/native";
 
 const generateAPIUrl = (relativePath: string) => {
-  const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
+  const serverUrl = env.EXPO_PUBLIC_SERVER_URL;
   if (!serverUrl) {
     throw new Error(
       "EXPO_PUBLIC_SERVER_URL environment variable is not defined"

package/templates/examples/ai/native/unistyles/app/(drawer)/ai.tsx.hbs

@@ -308,9 +308,10 @@ import { fetch as expoFetch } from "expo/fetch";
 import { Ionicons } from "@expo/vector-icons";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Container } from "@/components/container";
+import { env } from "@{{projectName}}/env/native";
 
 const generateAPIUrl = (relativePath: string) => {
-  const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
+  const serverUrl = env.EXPO_PUBLIC_SERVER_URL;
   if (!serverUrl) {
     throw new Error(
       "EXPO_PUBLIC_SERVER_URL environment variable is not defined"

package/templates/examples/ai/native/uniwind/app/(drawer)/ai.tsx.hbs

@@ -192,9 +192,10 @@ import { fetch as expoFetch } from "expo/fetch";
 import { Ionicons } from "@expo/vector-icons";
 import { Container } from "@/components/container";
 import { Card, useThemeColor } from "heroui-native";
+import { env } from "@{{projectName}}/env/native";
 
 const generateAPIUrl = (relativePath: string) => {
-  const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
+  const serverUrl = env.EXPO_PUBLIC_SERVER_URL;
   if (!serverUrl) {
     throw new Error(
       "EXPO_PUBLIC_SERVER_URL environment variable is not defined"

package/templates/examples/ai/web/nuxt/app/pages/ai.vue.hbs

@@ -6,15 +6,13 @@ import { DefaultChatTransport } from 'ai'
 import { ref } from 'vue'
 
 const config = useRuntimeConfig()
-const serverUrl = config.public.serverURL
-
 const messages: UIMessage[] = []
 const input = ref('')
 
 const chat = new Chat({
   messages,
   transport: new DefaultChatTransport({
-    api: `${serverUrl}/ai`,
+    api: `${config.public.serverUrl}/ai`,
   }),
   onError(error) {
     console.error('Chat error:', error)

package/templates/examples/ai/web/react/next/src/app/ai/page.tsx.hbs

@@ -9,7 +9,7 @@ import {
 } from "@convex-dev/agent/react";
 import { useMutation } from "convex/react";
 import { Send, Loader2 } from "lucide-react";
-{{#if (eq webDeploy "alchemy")}}
+{{#if (eq webDeploy "cloudflare")}}
 import dynamic from "next/dynamic";
 
 const Streamdown = dynamic(
@@ -160,7 +160,7 @@ export default function AIPage() {
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import { Send } from "lucide-react";
-{{#if (eq webDeploy "alchemy")}}
+{{#if (eq webDeploy "cloudflare")}}
 import dynamic from "next/dynamic";
 
 const Streamdown = dynamic(
@@ -181,12 +181,13 @@ import { useEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { env } from "@{{projectName}}/env/web";
 
 export default function AIPage() {
   const [input, setInput] = useState("");
   const { messages, sendMessage, status } = useChat({
     transport: new DefaultChatTransport({
-      api: {{#if (eq backend "self")}}"/api/ai"{{else}}`${process.env.NEXT_PUBLIC_SERVER_URL}/ai`{{/if}},
+      api: {{#if (eq backend "self")}}"/api/ai"{{else}}`${env.NEXT_PUBLIC_SERVER_URL}/ai`{{/if}},
     }),
   });
 

package/templates/examples/ai/web/react/react-router/src/routes/ai.tsx.hbs

@@ -144,6 +144,7 @@ import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import { Send } from "lucide-react";
 import { Streamdown } from "streamdown";
+import { env } from "@{{projectName}}/env/web";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -152,7 +153,7 @@ const AI: React.FC = () => {
   const [input, setInput] = useState("");
   const { messages, sendMessage, status } = useChat({
     transport: new DefaultChatTransport({
-      api: `${import.meta.env.VITE_SERVER_URL}/ai`,
+      api: `${env.VITE_SERVER_URL}/ai`,
     }),
   });
 

package/templates/examples/ai/web/react/tanstack-router/src/routes/ai.tsx.hbs

@@ -150,6 +150,9 @@ import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
 import { useRef, useEffect, useState } from "react";
 import { Streamdown } from "streamdown";
+{{#unless (eq backend "self")}}
+import { env } from "@{{projectName}}/env/web";
+{{/unless}}
 
 export const Route = createFileRoute("/ai")({
   component: RouteComponent,
@@ -159,7 +162,7 @@ function RouteComponent() {
   const [input, setInput] = useState("");
   const { messages, sendMessage, status } = useChat({
     transport: new DefaultChatTransport({
-      api: {{#if (eq backend "self")}}"/api/ai"{{else}}`${import.meta.env.VITE_SERVER_URL}/ai`{{/if}},
+      api: {{#if (eq backend "self")}}"/api/ai"{{else}}`${env.VITE_SERVER_URL}/ai`{{/if}},
     }),
   });
 

package/templates/examples/ai/web/react/tanstack-start/src/routes/ai.tsx.hbs

@@ -148,6 +148,9 @@ import { DefaultChatTransport } from "ai";
 import { Send } from "lucide-react";
 import { useRef, useEffect, useState } from "react";
 import { Streamdown } from "streamdown";
+{{#unless (eq backend "self")}}
+import { env } from "@{{projectName}}/env/web";
+{{/unless}}
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -160,7 +163,7 @@ function RouteComponent() {
   const [input, setInput] = useState("");
   const { messages, sendMessage, status } = useChat({
     transport: new DefaultChatTransport({
-      api: {{#if (eq backend "self")}}"/api/ai"{{else}}`${import.meta.env.VITE_SERVER_URL}/ai`{{/if}},
+      api: {{#if (eq backend "self")}}"/api/ai"{{else}}`${env.VITE_SERVER_URL}/ai`{{/if}},
     }),
   });
 

package/templates/frontend/native/bare/app/_layout.tsx.hbs

@@ -7,8 +7,10 @@ import "@/polyfills";
     import { ConvexReactClient } from "convex/react";
     import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
     import { authClient } from "@/lib/auth-client";
+    import { env } from "@{{projectName}}/env/native";
   {{else}}
     import { ConvexProvider, ConvexReactClient } from "convex/react";
+    import { env } from "@{{projectName}}/env/native";
   {{/if}}
   {{#if (eq auth "clerk")}}
     import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
@@ -56,7 +58,7 @@ export const unstable_settings = {
 };
 
 {{#if (eq backend "convex")}}
-const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
+const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
   unsavedChangesWarning: false,
 });
 {{/if}}
@@ -94,7 +96,7 @@ export default function RootLayout() {
     <>
       {{#if (eq backend "convex")}}
         {{#if (eq auth "clerk")}}
-          <ClerkProvider tokenCache={tokenCache} publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
+          <ClerkProvider tokenCache={tokenCache} publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
             <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
               <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
                 <StatusBar style={isDarkColorScheme ? "light" : "dark"} />

package/templates/frontend/native/unistyles/app/_layout.tsx.hbs

@@ -12,8 +12,10 @@ import { queryClient } from "@/utils/orpc";
 import { ConvexReactClient } from "convex/react";
 import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
 import { authClient } from "@/lib/auth-client";
+import { env } from "@{{projectName}}/env/native";
 {{else}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { env } from "@{{projectName}}/env/native";
 {{/if}}
 {{#if (eq auth "clerk")}}
 import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
@@ -35,7 +37,7 @@ export const unstable_settings = {
 };
 
 {{#if (eq backend "convex")}}
-const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL || "", {
+const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
   unsavedChangesWarning: false,
 });
 {{/if}}
@@ -48,7 +50,7 @@ export default function RootLayout() {
     {{#if (eq auth "clerk")}}
     <ClerkProvider
       tokenCache={tokenCache}
-      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
+      publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
     >
       <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
         <GestureHandlerRootView style=\{{ flex: 1 }}>

package/templates/frontend/native/uniwind/app/_layout.tsx.hbs

@@ -9,8 +9,10 @@ import "@/global.css";
     import { ConvexReactClient } from "convex/react";
     import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
     import { authClient } from "@/lib/auth-client";
+    import { env } from "@{{projectName}}/env/native";
   {{else}}
     import { ConvexProvider, ConvexReactClient } from "convex/react";
+    import { env } from "@{{projectName}}/env/native";
   {{/if}}
 
   {{#if (eq auth "clerk")}}
@@ -42,8 +44,7 @@ export const unstable_settings = {
 };
 
 {{#if (eq backend "convex")}}
-  const convexUrl = process.env.EXPO_PUBLIC_CONVEX_URL || "";
-  const convex = new ConvexReactClient(convexUrl, {
+  const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
     unsavedChangesWarning: false,
   });
 {{/if}}
@@ -64,7 +65,7 @@ export default function Layout() {
   return (
     {{#if (eq backend "convex")}}
       {{#if (eq auth "clerk")}}
-        <ClerkProvider tokenCache={tokenCache} publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
+        <ClerkProvider tokenCache={tokenCache} publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
           <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
             <GestureHandlerRootView style=\{{ flex: 1 }}>
               <KeyboardProvider>

package/templates/frontend/nuxt/nuxt.config.ts.hbs

@@ -1,3 +1,5 @@
+import "@{{projectName}}/env/web";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: 'latest',
@@ -17,10 +19,11 @@ export default defineNuxtConfig({
   convex: {
     url: process.env.NUXT_PUBLIC_CONVEX_URL,
   },
-  {{/if}}
+  {{else}}
   runtimeConfig: {
     public: {
-      serverURL: process.env.NUXT_PUBLIC_SERVER_URL,
+      serverUrl: process.env.NUXT_PUBLIC_SERVER_URL,
     }
-  }
+  },
+  {{/if}}
 })

package/templates/frontend/react/next/next.config.ts.hbs

@@ -1,21 +1,22 @@
-{{#if (eq webDeploy "alchemy")}}
+import "@{{projectName}}/env/web";
+{{#if (eq webDeploy "cloudflare")}}
 import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
 {{/if}}
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
 	typedRoutes: true,
-    reactCompiler: true,
+	reactCompiler: true,
 	{{#if (includes examples "ai")}}
-    transpilePackages: ["shiki"],
-    {{/if}}
-    {{#if (eq dbSetup "turso")}}
-    serverExternalPackages: ["libsql", "@libsql/client"],
-    {{/if}}
+	transpilePackages: ["shiki"],
+	{{/if}}
+	{{#if (eq dbSetup "turso")}}
+	serverExternalPackages: ["libsql", "@libsql/client"],
+	{{/if}}
 };
 
 export default nextConfig;
 
-{{#if (eq webDeploy "alchemy")}}
+{{#if (eq webDeploy "cloudflare")}}
 initOpenNextCloudflareForDev();
 {{/if}}

package/templates/frontend/react/next/src/components/providers.tsx.hbs

@@ -5,12 +5,15 @@
 import { useAuth } from "@clerk/nextjs";
 import { ConvexReactClient } from "convex/react";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
+import { env } from "@{{projectName}}/env/web";
 {{else if (eq auth "better-auth")}}
 import { ConvexReactClient } from "convex/react";
 import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
 import { authClient } from "@/lib/auth-client";
+import { env } from "@{{projectName}}/env/web";
 {{else}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { env } from "@{{projectName}}/env/web";
 {{/if}}
 {{else}}
 {{#unless (eq api "none")}}
@@ -28,7 +31,7 @@ import { ThemeProvider } from "./theme-provider";
 import { Toaster } from "./ui/sonner";
 
 {{#if (eq backend "convex")}}
-const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL);
 {{/if}}
 
 export default function Providers({

package/templates/frontend/react/next/tsconfig.json.hbs

@@ -21,13 +21,13 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }{{#if (or (eq serverDeploy "alchemy") (eq webDeploy "alchemy"))}},
+    }{{#if (or (eq serverDeploy "cloudflare") (eq webDeploy "cloudflare"))}},
     "types": [
       "@cloudflare/workers-types"
     ]{{/if}}
   },
   "include": [
-    {{#if (eq serverDeploy "alchemy")}}
+    {{#if (eq serverDeploy "cloudflare")}}
     "../server/env.d.ts",
     {{/if}}
     "./next-env.d.ts",

package/templates/frontend/react/react-router/src/root.tsx.hbs

@@ -14,6 +14,7 @@ import { Toaster } from "./components/ui/sonner";
 
 {{#if (eq backend "convex")}}
 import { ConvexReactClient } from "convex/react";
+import { env } from "@{{projectName}}/env/web";
 {{#if (eq auth "clerk")}}
 import { ClerkProvider, useAuth } from "@clerk/clerk-react";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
@@ -63,12 +64,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 {{#if (eq backend "convex")}}
 export default function App() {
-  const convex = new ConvexReactClient(
-    import.meta.env.VITE_CONVEX_URL as string,
-  );
+  const convex = new ConvexReactClient(env.VITE_CONVEX_URL);
   {{#if (eq auth "clerk")}}
   return (
-    <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
+    <ClerkProvider publishableKey={env.VITE_CLERK_PUBLISHABLE_KEY}>
       <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
         <ThemeProvider
           attribute="class"

package/templates/frontend/react/tanstack-router/src/main.tsx.hbs

@@ -13,6 +13,7 @@ import { routeTree } from "./routeTree.gen";
 {{/if}}
 {{#if (eq backend "convex")}}
   import { ConvexReactClient } from "convex/react";
+  import { env } from "@{{projectName}}/env/web";
   {{#if (eq auth "clerk")}}
   import { ClerkProvider, useAuth } from "@clerk/clerk-react";
   import { ConvexProviderWithClerk } from "convex/react-clerk";
@@ -22,7 +23,7 @@ import { routeTree } from "./routeTree.gen";
   {{else}}
   import { ConvexProvider } from "convex/react";
   {{/if}}
-  const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
+  const convex = new ConvexReactClient(env.VITE_CONVEX_URL);
 {{/if}}
 
 const router = createRouter({
@@ -53,7 +54,7 @@ const router = createRouter({
     {{#if (eq auth "clerk")}}
     return (
       <ClerkProvider
-        publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
+        publishableKey={env.VITE_CLERK_PUBLISHABLE_KEY}
       >
         <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
           {children}

package/templates/frontend/react/tanstack-start/src/router.tsx.hbs

@@ -1,152 +1,144 @@
 {{#if (eq backend "convex")}}
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import { QueryClient } from "@tanstack/react-query";
-import { routerWithQueryClient } from "@tanstack/react-router-with-query";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
 import { ConvexQueryClient } from "@convex-dev/react-query";
-import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { routeTree } from "./routeTree.gen";
 import Loader from "./components/loader";
 import "./index.css";
+import { env } from "@{{projectName}}/env/web";
 {{else}}
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import Loader from "./components/loader";
 import "./index.css";
 import { routeTree } from "./routeTree.gen";
-  {{#if (eq api "trpc")}}
+{{#if (eq api "trpc")}}
 import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import { toast } from "sonner";
 import type { AppRouter } from "@{{projectName}}/api/routers/index";
 import { TRPCProvider } from "./utils/trpc";
-  {{else if (eq api "orpc")}}
+{{#unless (eq backend "self")}}
+import { env } from "@{{projectName}}/env/web";
+{{/unless}}
+{{else if (eq api "orpc")}}
 import { QueryClientProvider } from "@tanstack/react-query";
 import { orpc, queryClient } from "./utils/orpc";
-  {{/if}}
+{{/if}}
 {{/if}}
 
 {{#if (eq backend "convex")}}
 export function getRouter() {
-  const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!;
-  if (!CONVEX_URL) {
-    console.error("missing envar VITE_CONVEX_URL");
-  }
-  const convex = new ConvexReactClient(CONVEX_URL, {
-    unsavedChangesWarning: false,
-  });
+	const convexUrl = env.VITE_CONVEX_URL;
+	if (!convexUrl) {
+		throw new Error("VITE_CONVEX_URL is not set");
+	}
+
+	const convexQueryClient = new ConvexQueryClient(convexUrl);
+
+	const queryClient: QueryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				queryKeyHashFn: convexQueryClient.hashFn(),
+				queryFn: convexQueryClient.queryFn(),
+			},
+		},
+	});
+	convexQueryClient.connect(queryClient);
 
-  {{#if (eq auth "better-auth")}}
-  const convexQueryClient = new ConvexQueryClient(convex, {
-    expectAuth: true,
-  });
-  {{else}}
-  const convexQueryClient = new ConvexQueryClient(convex);
-  {{/if}}
+	const router = createTanStackRouter({
+		routeTree,
+		defaultPreload: "intent",
+		defaultPendingComponent: () => <Loader />,
+		defaultNotFoundComponent: () => <div>Not Found</div>,
+		context: { queryClient, convexQueryClient },
+	});
 
-  const queryClient: QueryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        queryKeyHashFn: convexQueryClient.hashFn(),
-        queryFn: convexQueryClient.queryFn(),
-      },
-    },
-  });
-  convexQueryClient.connect(queryClient);
+	setupRouterSsrQueryIntegration({
+		router,
+		queryClient,
+	});
 
-  const router = routerWithQueryClient(
-    createTanStackRouter({
-      routeTree,
-      defaultPreload: "intent",
-      defaultPendingComponent: () => <Loader />,
-      defaultNotFoundComponent: () => <div>Not Found</div>,
-      context: { queryClient, convexClient: convex, convexQueryClient },
-      Wrap: ({ children }) => (
-        <ConvexProvider client={convexQueryClient.convexClient}>
-          {children}
-        </ConvexProvider>
-      ),
-    }),
-    queryClient,
-  );
-  return router;
+	return router;
 }
 {{else}}
-  {{#if (eq api "trpc")}}
+{{#if (eq api "trpc")}}
 export const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    onError: (error, query) => {
-      toast.error(error.message, {
-        action: {
-          label: "retry",
-          onClick: query.invalidate,
-        },
-      });
-    },
-  }),
-  defaultOptions: { queries: { staleTime: 60 * 1000 } },
+	queryCache: new QueryCache({
+		onError: (error, query) => {
+			toast.error(error.message, {
+				action: {
+					label: "retry",
+					onClick: query.invalidate,
+				},
+			});
+		},
+	}),
+	defaultOptions: { queries: { staleTime: 60 * 1000 } },
 });
 
 const trpcClient = createTRPCClient<AppRouter>({
-  links: [
-    httpBatchLink({
-      url: {{#if (eq backend "self")}}"/api/trpc"{{else}}`${import.meta.env.VITE_SERVER_URL}/trpc`{{/if}},
-      {{#if (eq auth "better-auth")}}
-      fetch(url, options) {
-        return fetch(url, {
-          ...options,
-          credentials: "include",
-        });
-      },
-      {{/if}}
-    }),
-  ],
+	links: [
+		httpBatchLink({
+			url: {{#if (eq backend "self")}}"/api/trpc"{{else}}`${env.VITE_SERVER_URL}/trpc`{{/if}},
+{{#if (eq auth "better-auth")}}
+			fetch(url, options) {
+				return fetch(url, {
+					...options,
+					credentials: "include",
+				});
+			},
+{{/if}}
+		}),
+	],
 });
 
 const trpc = createTRPCOptionsProxy({
-  client: trpcClient,
-  queryClient: queryClient,
+	client: trpcClient,
+	queryClient: queryClient,
 });
-  {{else if (eq api "orpc")}}
-  {{/if}}
+{{else if (eq api "orpc")}}
+{{/if}}
 
 export const getRouter = () => {
-  const router = createTanStackRouter({
-    routeTree,
-    scrollRestoration: true,
-    defaultPreloadStaleTime: 0,
-    {{#if (eq api "trpc")}}
-    context: { trpc, queryClient },
-    {{else if (eq api "orpc")}}
-    context: { orpc, queryClient },
-    {{else}}
-    context: {},
-    {{/if}}
-    defaultPendingComponent: () => <Loader />,
-    defaultNotFoundComponent: () => <div>Not Found</div>,
-    {{#if (eq api "trpc")}}
-    Wrap: ({ children }) => (
-      <QueryClientProvider client={queryClient}>
-        <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
-          {children}
-        </TRPCProvider>
-      </QueryClientProvider>
-    ),
-    {{else if (eq api "orpc")}}
-    Wrap: ({ children }) => (
-      <QueryClientProvider client={queryClient}>
-        {children}
-      </QueryClientProvider>
-    ),
-    {{else}}
-    Wrap: ({ children }) => <>{children}</>,
-    {{/if}}
-  });
-  return router;
+	const router = createTanStackRouter({
+		routeTree,
+		scrollRestoration: true,
+		defaultPreloadStaleTime: 0,
+{{#if (eq api "trpc")}}
+		context: { trpc, queryClient },
+{{else if (eq api "orpc")}}
+		context: { orpc, queryClient },
+{{else}}
+		context: {},
+{{/if}}
+		defaultPendingComponent: () => <Loader />,
+		defaultNotFoundComponent: () => <div>Not Found</div>,
+{{#if (eq api "trpc")}}
+		Wrap: ({ children }) => (
+			<QueryClientProvider client={queryClient}>
+				<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+					{children}
+				</TRPCProvider>
+			</QueryClientProvider>
+		),
+{{else if (eq api "orpc")}}
+		Wrap: ({ children }) => (
+			<QueryClientProvider client={queryClient}>
+				{children}
+			</QueryClientProvider>
+		),
+{{else}}
+		Wrap: ({ children }) => <>{children}</>,
+{{/if}}
+	});
+	return router;
 };
 {{/if}}
 
 declare module "@tanstack/react-router" {
-  interface Register {
-    router: ReturnType<typeof getRouter>;
-  }
+	interface Register {
+		router: ReturnType<typeof getRouter>;
+	}
 }