Migrate from Next.js to TanStack Start by Copilot · Pull Request #12 · blai30/hextech-check

Copilot · 2026-03-14T00:04:58Z

Replaces the Next.js App Router with TanStack Start (Vite-based), removes all Vercel-specific packages, and swaps next-themes for a minimal localStorage-based theme solution.

Framework & Build

vite.config.ts replaces next.config.ts using @tanstack/react-start/plugin/vite + vite-tsconfig-paths
tsr.config.json configures TanStack Router file-based routing
Entry points: app/client.tsx (hydration), app/ssr.tsx (createStartHandler)
Scripts changed to vite dev / build / preview

Routing

File-based routes under app/routes/:

__root.tsx — full HTML document shell (replaces app/layout.tsx + app/providers.tsx)
index.tsx — home page
$region/$player.tsx — player page with createServerFn loader; keeps RIOT_API_KEY server-only across both SSR and client-side navigation

const fetchSummonerData = createServerFn()
  .inputValidator((input: { region: string; player: string }) => input)
  .handler(async ({ data }) => { /* Riot API calls — server only */ })

export const Route = createFileRoute('/$region/$player')({
  loader: ({ params }) => fetchSummonerData({ data: params }),
  head: ({ loaderData }) => ({ meta: [{ title: `${loaderData.accountData.gameName}...` }] }),
  component: PlayerPage,
})

Theme (replaces `next-themes`)

lib/theme.ts — getStoredTheme / applyTheme / getCurrentTheme via localStorage
Inline <script> in <head> prevents FOUC by applying dark class before paint
ThemeSwitch now uses a useEffect to sync with system preference changes

Removed Packages

next, next-themes, @vercel/analytics, @vercel/speed-insights, eslint-config-next, cross-env

Component Updates

next/link → Link from @tanstack/react-router; usePathname → useLocation
useRouter (navigation) → useNavigate
next/image → <img> (images are external CDN URLs with fixed dimensions)
next/font/google → Google Fonts stylesheet link in <head>
Removed 'use client' directives and Next.js server component wrappers (components/server/)

Original prompt

Migrate this entire Nextjs project to Tanstack Start. Use other Tanstack libraries wherever they are applicable. Remove vercel related packages from the project. Remove next-themes and implement a simple solution for theme changing. Keep Tailwind CSS and Typescript. Since this web app heavily relies on SSR and server related features for dynamic rendering, Tanstack Start is perfect. Follow all of the best practices and guidelines from the up-to-date official documentation. Keep configurations as close to the default as possible, only deviating from the defaults if it is necessary. Configure Tanstack Router with the best settings and preferences. Lastly, make sure the web app is fully functional with Tanstack Start and all of Tanstack related libraries (if applicable).

[Chronological Review: The conversation began with the user requesting to migrate a Next.js project to Tanstack Start, emphasizing the need to remove Vercel-related packages, implement a simple theme-changing solution, and maintain Tailwind CSS and TypeScript. The user also requested adherence to best practices from the official documentation and proper configuration of Tanstack Router. The user then attempted to commit changes and delegate the task to a cloud agent, which triggered the summarization.]

[Intent Mapping:

"Migrate this entire Nextjs project to Tanstack Start." - User's primary goal to transition the project.
"Remove vercel related packages from the project." - Specific request to clean up dependencies.
"Remove next-themes and implement a simple solution for theme changing." - User wants to simplify theme management.
"Keep Tailwind CSS and Typescript." - Ensuring these technologies remain in use.
"Configure Tanstack Router with the best settings and preferences." - Request for optimal configuration.
"Delegate to cloud agent." - User's intent to offload the task to an automated agent.]

[Technical Inventory:

Technologies: Next.js, Tanstack Start, Tailwind CSS, TypeScript.
Tools: Tanstack Router, cloud agent for task delegation.
Architectural Decisions: Focus on SSR and server-related features, maintaining default configurations unless necessary.]

[Code Archaeology:

Current File: package.json
Purpose: Manage project dependencies and scripts.
Recent Changes: User is preparing to commit changes related to the migration and configuration.]

[Progress Assessment:

Completed Tasks: User has outlined the migration plan and specified requirements.
Partially Complete Work: The actual migration and configuration tasks are still pending, awaiting execution by the cloud agent.]

[Context Validation: All critical information for continuation is captured, including user goals and specific requests for the migration process.]

[Recent Commands Analysis:

Last Agent Commands: "Commit Changes and Delegate: 'Delegate to cloud agent'"
Tool Results Summary: No specific tool results were returned as the command was to delegate the task.
Pre-Summary State: The agent was actively preparing to commit changes in the package.json file and delegate the migration task to a cloud agent when the token budget was exceeded.
Operation Context: The command was executed to offload the migration task, aligning with the user's goal of transitioning to Tanstack Start efficiently.]

1. Conversation Overview: - Primary Objectives: - "Migrate this entire Nextjs project to Tanstack Start." - "Remove vercel related packages from the project." - "Remove next-themes and implement a simple solution for theme changing." - "Keep Tailwind CSS and Typescript." - "Configure Tanstack Router with the best settings and preferences." - "Delegate to cloud agent." - Session Context: The user initiated a migration of a Next.js project to Tanstack Start, specifying various requirements and configurations. The conversation progressed towards committing changes and delegating the task. - User Intent Evolution: The user maintained a clear focus on migrating to Tanstack Start while ensuring specific technologies and configurations were preserved.

Technical Foundation:

Next.js: Framework for server-rendered React applications.
Tanstack Start: New framework for building applications with SSR capabilities.
Tailwind CSS: Utility-first CSS framework for styling.
TypeScript: Superset of JavaScript for type safety.

Codebase Status:

File Name: package.json
Purpose: Manage project dependencies and scripts.
Current State: User is preparing to commit changes related to the migration.
Key Code Segments: Dependencies related to Next.js and Vercel are to be removed.
Dependencies: The file is central to the migration process, as it dictates the project's libraries.

Problem Resolution:

Issues Encountered: Need to remove unnecessary packages and implement a new theming solution.
Solutions Implemented: User has outlined the migration steps and requirements.
Debugging Context: No ...

Created from VS Code.

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

vercel · 2026-03-14T00:05:07Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hextech-check	Error		Mar 14, 2026 2:20am

- Replace Next.js with TanStack Start (@tanstack/react-start@1.166.9) - Replace vinxi with Vite 7.x as the build system - Remove @vercel/analytics, @vercel/speed-insights, next-themes packages - Add vite.config.ts with tanstackStart plugin and vite-tsconfig-paths - Create app/router.tsx with getRouter() export for TanStack Start - Create app/client.tsx and app/ssr.tsx as new entry points - Create app/routes/__root.tsx as root layout with inline theme script - Create app/routes/index.tsx as home page route - Create app/routes/$region/$player.tsx with createServerFn for SSR data - Add lib/theme.ts with simple localStorage-based theme utilities - Update ThemeSwitch to use custom theme utilities (no next-themes) - Update Header to use TanStack Router's Link and useLocation - Update SearchForm to use TanStack Router's useNavigate - Update SummonerDetails and MasteryCard to use <img> instead of next/image - Update tsconfig.json for Vite/Bundler module resolution - Update eslint.config.mjs to remove next-specific rules - Update globals.css to use Google Fonts instead of next/font - Remove all 'use client' directives (not needed in TanStack Start) - Remove Next.js specific files (layout.tsx, page.tsx, next.config.ts etc.) - Add app/routeTree.gen.ts and dist/ to .gitignore - Add tsr.config.json for route tree generation configuration Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…ont, fix scale type Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Initial plan

74c7370

Copilot AI assigned Copilot and blai30 Mar 14, 2026

Copilot started work on behalf of blai30 March 14, 2026 00:05 View session

vercel Bot had a problem deploying to Preview March 14, 2026 00:05 Failure

Copilot AI and others added 2 commits March 14, 2026 00:39

Address code review: use const in theme script, remove unused Inter f…

3528d3f

…ont, fix scale type Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

vercel Bot had a problem deploying to Preview March 14, 2026 00:54 Failure

Copilot AI changed the title ~~[WIP] Migrate Next.js project to Tanstack Start framework~~ Migrate from Next.js to TanStack Start Mar 14, 2026

Copilot AI requested a review from blai30 March 14, 2026 00:56

Copilot finished work on behalf of blai30 March 14, 2026 01:02

Initial commit

b0c6270

vercel Bot had a problem deploying to Preview March 14, 2026 02:20 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from Next.js to TanStack Start#12

Migrate from Next.js to TanStack Start#12
Copilot wants to merge 4 commits into
mainfrom
copilot/migrate-nextjs-to-tanstack-start

Copilot AI commented Mar 14, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Mar 14, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Framework & Build

Routing

Theme (replaces next-themes)

Removed Packages

Component Updates

Uh oh!

vercel Bot commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Mar 14, 2026 •

edited

Loading

Theme (replaces `next-themes`)

vercel Bot commented Mar 14, 2026 •

edited

Loading