React + Vite + Go: Building with TanStack Router

Why TanStack Router?

Throughout the Grit Web course, you used Next.js as your frontend. Next.js is great for public-facing websites that need SEO, but it comes with overhead you don't always need — server-side rendering, server components, hydration. For apps where every user is logged in, there's a faster alternative.

Here's how TanStack Router + Vite compares to Next.js:

Scaffold with Vite

Grit supports Vite as an alternative frontend. When you pass the --vite flag, Grit scaffolds TanStack Router instead of Next.js:

grit new dashboard --double --vite

This creates a Double architecture (Go API + frontend) but with a Vite-powered React app instead of Next.js. Here's what's different:

File-Based Routing

TanStack Router discovers routes from your file system, just like Next.js. But the naming conventions are different:

src/routes/
├── __root.tsx       ← Root layout (navbar, providers)
├── index.tsx        ← / (home page)
├── about.tsx        ← /about
├── products/
│   ├── index.tsx    ← /products (list)
│   ├── $id.tsx      ← /products/:id (detail)
│   └── new.tsx      ← /products/new (create)

Key naming rules:

• • __root.tsx — the root layout that wraps every page (like Next.js' root layout.tsx)
• • index.tsx — the default page for a directory (like Next.js' page.tsx)
• • $param.tsx — a dynamic route segment (Next.js uses [param])
• • _layout.tsx — a nested layout for a route group

Route Parameters

Files starting with $ create dynamic route parameters. The $id.tsx file matches any value in that URL segment and makes it available as a typed parameter:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/products/$id')({
  component: ProductDetail,
})

function ProductDetail() {
  const { id } = Route.useParams()

  return (
    <div>
      <h1>Product {id}</h1>
      {/* Fetch and display product details */}
    </div>
  )
}

The id parameter is fully type-safe. If you try to access a parameter that doesn't exist, TypeScript will catch the error at compile time. This is a major advantage over Next.js' params prop, which is loosely typed.

Layouts

The __root.tsx file is the root layout — it wraps every page in your app. This is where you place your navbar, providers (query client, auth context), and global styles:

import { createRootRoute, Outlet } from '@tanstack/react-router'
import { Navbar } from '../components/navbar'

export const Route = createRootRoute({
  component: RootLayout,
})

function RootLayout() {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <Outlet />
    </div>
  )
}

The Outlet component renders the current route's page — just like the children prop in Next.js layouts.

For nested layouts (e.g., a sidebar that only appears on dashboard pages), create a route group with a layout file:

src/routes/
├── dashboard/
│   ├── _layout.tsx      ← Sidebar layout for all /dashboard/* routes
│   ├── index.tsx        ← /dashboard (main dashboard)
│   ├── projects.tsx     ← /dashboard/projects
│   └── settings.tsx     ← /dashboard/settings

Data Fetching

Data fetching in a Vite app is identical to what you learned in the Grit Web course. TanStack Query (useQuery, useMutation) works the same way — it's a React library, not a Next.js feature. The only difference is that everything runs client-side.

import { useQuery } from '@tanstack/react-query'
import { api } from '../../lib/api-client'

function ProductList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['products'],
    queryFn: () => api.get('/api/products'),
  })

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error loading products</div>

  return (
    <div>
      <h1>Products</h1>
      {data.data.map((product: any) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  )
}

Navigation

TanStack Router provides its own Link component and useNavigate hook. The Link component is type-safe — it only allows you to link to routes that actually exist:

import { Link, useNavigate } from '@tanstack/react-router'

// Declarative navigation (in JSX)
<Link to="/products">All Products</Link>

// With parameters — fully type-checked
<Link to="/products/$id" params={{ id: '42' }}>
  View Product
</Link>

// Programmatic navigation (in event handlers)
function CreateButton() {
  const navigate = useNavigate()

  const handleCreate = async () => {
    const product = await createProduct(data)
    navigate({ to: '/products/$id', params: { id: product.id } })
  }

  return <button onClick={handleCreate}>Create</button>
}

If you try to link to a route that doesn't exist, TypeScript shows an error immediately. If you forget a required parameter, TypeScript catches that too. This is a significant improvement over Next.js' Link component, which accepts any string.

Auth in Vite Apps

Authentication in a Vite SPA works the same way as in Next.js, with one key difference: there's no server to manage cookies. Instead, you store the JWT token in localStorage and include it in every API request via an Authorization header.

// Auth context wraps the entire app
function AuthProvider({ children }) {
  const [token, setToken] = useState(localStorage.getItem('token'))
  const [user, setUser] = useState(null)

  const login = async (email: string, password: string) => {
    const res = await api.post('/api/auth/login', { email, password })
    localStorage.setItem('token', res.data.token)
    setToken(res.data.token)
    setUser(res.data.user)
  }

  const logout = () => {
    localStorage.removeItem('token')
    setToken(null)
    setUser(null)
  }

  return (
    <AuthContext.Provider value={{ user, token, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

To protect routes, check for the token and redirect to /login if not authenticated. You can do this in a layout component that wraps all protected routes:

function DashboardLayout() {
  const { user } = useAuth()
  const navigate = useNavigate()

  if (!user) {
    navigate({ to: '/login' })
    return null
  }

  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1 p-6">
        <Outlet />
      </main>
    </div>
  )
}

Building for Production

When you're ready to deploy, build the Vite frontend into static files:

cd frontend && pnpm build

This outputs optimized files to frontend/dist/. Vite tree-shakes unused code, minifies everything, and splits the bundle into chunks for optimal loading.

For Grit's Single architecture, the dist/ folder gets embedded directly into the Go binary via go:embed. This means your entire app — API and frontend — is a single executable file:

//go:embed all:frontend/dist
var frontendFS embed.FS

// Serve frontend from the embedded files
router.NoRoute(gin.WrapH(http.FileServer(http.FS(frontendFS))))

Vite Dev Server Proxy

During development, the Vite dev server runs on one port (typically 5173) and the Go API runs on another (typically 8080). The Vite proxy configuration forwards API requests to the Go server so you don't have to deal with CORS:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [TanStackRouterVite(), react()],
  server: {
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
})

With this configuration, when your frontend code calls fetch("/api/products"), Vite intercepts the request and forwards it to http://localhost:8080/api/products. This only applies during development — in production, both frontend and API are served from the same origin.

When to Use Next.js vs Vite

Here's the decision framework:

What You Learned

• When to choose TanStack Router + Vite over Next.js
• How to scaffold a Vite project with grit new --vite
• File-based routing with TanStack Router
• Type-safe route parameters, layouts, and navigation
• Data fetching with TanStack Query (same as Next.js)
• JWT auth with localStorage for SPAs
• Vite dev server proxy for API calls
• Building for production and embedding in Go