Move to TanStack Start from Next.js (#184)

2026-01-12 12:20:23 +01:00 · 2024-10-07 16:44:17 +07:00
parent 3a89a1c07f
commit 950ebc3dad
514 changed files with 20021 additions and 15508 deletions
--- a/web/app/routes/__root.tsx
+++ b/web/app/routes/__root.tsx
@@ -0,0 +1,117 @@
+/// <reference types="vite/client" />
+import type { QueryClient } from "@tanstack/react-query"
+import {
+  Outlet,
+  ScrollRestoration,
+  createRootRouteWithContext,
+} from "@tanstack/react-router"
+import { Body, Head, Html, Meta, Scripts } from "@tanstack/start"
+import * as React from "react"
+import { fetchClerkAuth } from "~/actions"
+import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary.js"
+import { NotFound } from "~/components/NotFound.js"
+import appCss from "~/styles/app.css?url"
+
+export const TanStackRouterDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null
+    : React.lazy(() =>
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      )
+
+export const ReactQueryDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null
+    : React.lazy(() =>
+        import("@tanstack/react-query-devtools/production").then((d) => ({
+          default: d.ReactQueryDevtools,
+        })),
+      )
+
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient
+}>()({
+  meta: () => [
+    {
+      charSet: "utf-8",
+    },
+    {
+      name: "viewport",
+      content: "width=device-width, initial-scale=1",
+    },
+  ],
+  links: () => [
+    { rel: "stylesheet", href: appCss },
+    {
+      rel: "apple-touch-icon",
+      sizes: "180x180",
+      href: "/apple-touch-icon.png",
+    },
+    {
+      rel: "icon",
+      type: "image/png",
+      sizes: "32x32",
+      href: "/favicon-32x32.png",
+    },
+    {
+      rel: "icon",
+      type: "image/png",
+      sizes: "16x16",
+      href: "/favicon-16x16.png",
+    },
+    { rel: "manifest", href: "/site.webmanifest", color: "#fffff" },
+    { rel: "icon", href: "/favicon.ico" },
+  ],
+  beforeLoad: async ({ cause }) => {
+    if (cause !== "stay") {
+      const { user } = await fetchClerkAuth()
+      return {
+        user,
+      }
+    }
+
+    return {
+      user: null,
+    }
+  },
+  errorComponent: (props) => {
+    return (
+      <RootDocument>
+        <DefaultCatchBoundary {...props} />
+      </RootDocument>
+    )
+  },
+  notFoundComponent: () => <NotFound />,
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <Html>
+      <Head>
+        <Meta />
+      </Head>
+      <Body>
+        {children}
+
+        <React.Suspense>
+          <TanStackRouterDevtools position="bottom-right" />
+          <ReactQueryDevtools buttonPosition="bottom-left" />
+        </React.Suspense>
+
+        <ScrollRestoration />
+        <Scripts />
+      </Body>
+    </Html>
+  )
+}