Migrate from Next.js to TanStack Start with Cloudflare Workers

.eslintrc.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier',
+    ],
+    overrides: [],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: {
+            jsx: true,
+        },
+        sourceType: 'module',
+        project: ['./tsconfig.json'],
+    },
+    plugins: ['prettier', 'react', '@typescript-eslint'],
+    rules: {
+        'react/react-in-jsx-scope': 0,
+        'react/display-name': 0,
+        'react/prop-types': 0,
+        'react/no-unescaped-entities': 0,
+        'react/require-default-props': 0,
+        'react/jsx-no-useless-fragment': 'warn',
+        '@typescript-eslint/no-use-before-define': 'warn',
+        '@typescript-eslint/no-shadow': 'warn',
+        'no-nested-ternary': 'warn',
+        'prefer-destructuring': 'warn',
+    },
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+}

.gitignore

@@ -1,5 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
 /.pnp
@@ -9,11 +7,9 @@
 # testing
 /coverage
 
-# next.js
-/.next/
+# build output
+/dist
 /out/
-
-# production
 /build
 
 # misc
@@ -28,9 +24,9 @@ yarn-error.log*
 # local env files
 .env*.local
 
-# vercel
-.vercel
+# cloudflare
+.wrangler
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+

app/client.tsx

@@ -0,0 +1,12 @@
+import { StartClient } from '@tanstack/react-start/client'
+import { StrictMode, startTransition } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+
+startTransition(() => {
+    hydrateRoot(
+        document,
+        <StrictMode>
+            <StartClient />
+        </StrictMode>,
+    )
+})

app/routeTree.gen.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

app/router.tsx

@@ -0,0 +1,16 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+    const router = createRouter({
+        routeTree,
+        scrollRestoration: true,
+    })
+    return router
+}
+
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: ReturnType<typeof getRouter>
+    }
+}

app/routes/__root.tsx

@@ -0,0 +1,81 @@
+import TopNavigation from '../../components/TopNavigation'
+import appCss from '../styles.css?url'
+import {
+    HeadContent,
+    Outlet,
+    Scripts,
+    createRootRoute,
+} from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+    head: () => ({
+        meta: [
+            { charSet: 'utf-8' },
+            {
+                name: 'viewport',
+                content: 'width=device-width, initial-scale=1',
+            },
+            { title: 'Clay McGinnis' },
+            {
+                name: 'description',
+                content: 'The portfolio of Clay McGinnis',
+            },
+        ],
+        links: [
+            { rel: 'stylesheet', href: appCss },
+            {
+                rel: 'icon',
+                href: '/favicon.ico',
+                media: '(prefers-color-scheme: light)',
+            },
+            {
+                rel: 'icon',
+                href: '/favicon-dark.ico',
+                media: '(prefers-color-scheme: dark)',
+            },
+            { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+            { rel: 'manifest', href: '/site.webmanifest' },
+        ],
+    }),
+    component: RootComponent,
+})
+
+function RootComponent() {
+    return (
+        <html
+            lang="en"
+            className="min-h-screen h-full overflow-x-hidden max-w-screen w-screen"
+        >
+            <head>
+                <HeadContent />
+            </head>
+            <body className="bg-[#EAEADF] w-full min-h-full h-full font-sans z-0">
+                <div className="w-full min-h-full p-4 md:p-10 flex flex-col">
+                    <TopNavigation />
+                    <Outlet />
+                </div>
+                <div className="absolute w-full pointer-events-none top-0 bottom-0 left-0 right overflow-x-hidden">
+                    <img
+                        src="/BlueShape.svg"
+                        alt=""
+                        aria-hidden="true"
+                        className="absolute min-w-[600px] w-[60%] -z-40 left-[2%] top-[2%] pointer-events-none"
+                    />
+                    <img
+                        src="/OrangeShape.svg"
+                        alt=""
+                        aria-hidden="true"
+                        className="absolute min-w-[700px] w-[70%] -z-50 left-[30%] md:right-[2%] top-[28%] pointer-events-none"
+                    />
+                    <img
+                        src="/OrangeShape.svg"
+                        alt=""
+                        aria-hidden="true"
+                        className="absolute min-w-[700px] w-[70%] -z-30 opacity-60 left-[30%] md:right-[2%] top-[28%] pointer-events-none"
+                    />
+                </div>
+                <Scripts />
+            </body>
+        </html>
+    )
+}