Next.js and TanStack Start are both full-stack React frameworks that render pages on the server, so either can produce a fast, search-friendly site. Next.js is the safer default for marketing sites and products that a growing team will maintain. TanStack Start suits projects where you want type-safe routing, explicit data loading and a lean Vite setup you control end to end.
I build Next.js sites for clients through my Next.js and React websites service, and this portfolio, mohitgoyal.in, runs on TanStack Start. Here is how I decide between them.
What is the difference between Next.js and TanStack Start?
The short version: Next.js is a complete, opinionated platform with conventions for almost everything, built around the App Router. TanStack Start is a thinner layer on top of TanStack Router and Vite, where routing and data loading are typed end to end and you assemble more of the rest yourself.
| Factor | Next.js | TanStack Start |
|---|---|---|
| Built on | Its own compiler and server, with the App Router and React Server Components | TanStack Router and Vite |
| Routing | File-based folders, layouts and route groups | File-based routes with typed paths, params and search params |
| Data loading | Server Components fetch data inside the component tree | Route loaders run before the route renders, and their return type flows to the component |
| Server code | Route handlers and server actions | Server routes and server functions |
| Metadata | Metadata API and generateMetadata | A head function per route |
| Images and fonts | Built in, with next/image and next/font | Bring your own approach |
| Hosting | Least setup on Vercel, runs elsewhere with adapters | Vite build that targets Node or edge platforms |
| Hiring | Larger pool of developers who know it | Smaller pool, though any React developer picks it up |
On hiring, Next.js is among the most-used web frameworks in the Stack Overflow Developer Survey and the State of JS results. TanStack Start is far newer, so fewer developers have shipped it, though anyone comfortable with React and TypeScript can learn it quickly.
When should you choose Next.js?
When the site is mainly marketing content and the people maintaining it will change over time. A typical case is a content-heavy marketing site with product, blog and campaign pages, built on a shared, typed component library any developer can pick up.
Next.js gives you server rendering and route-level code splitting out of the box, which is the shortest path to good Core Web Vitals on a content-heavy site. next/image handles responsive images, next/font self-hosts fonts, and the Metadata API gives every page its own title, description and Open Graph tags. Its conventions mean a new developer finds things where they expect them. Campaign and event pages can ship from the same codebase as the main site, so they are server rendered, indexable and on-brand without a separate microsite. That kind of reuse is where a well-known, opinionated framework pays off.
Choose Next.js when:
- The site is mostly pages, posts and campaign landing pages.
- You want built-in image and font handling.
- Someone else will maintain it, so hiring and documentation matter.
- You are happy to host on Vercel, or willing to configure an adapter elsewhere.
When should you choose TanStack Start?
When the project behaves more like an app and you want the data flow to be explicit. I picked TanStack Start for this portfolio because I wanted server-side rendering with type-safe routing. That keeps every project page indexable and makes the data loading obvious: each route's loader fetches what the page needs before it renders, and TypeScript knows the shape of that data in the component. Per-route head management sets titles and meta tags, and server functions let you call server-only code from the client without building a separate API layer.
The site mixes ordinary content pages with an AI chat that answers as me, built on the Anthropic Claude API and Firestore. Having the pages and the chat's server code in one Vite project, with typed routes between them, kept it simple to reason about.
Choose TanStack Start when:
- You want typed links, params and search params across the whole app.
- Data loading per route matters more than built-in image tooling.
- You prefer Vite and want to choose your own hosting target.
- One developer or a small team that knows the codebase will maintain it.
Related guide: How to build an AI chat portfolio site that answers as you
How do I decide on a real project?
I ask three questions, in this order.
Most client marketing sites land on Next.js, because the maintenance question decides it. Tools, dashboards and personal products are where TanStack Start earns its place. If you are not sure, the free Tech Stack Advisor takes your project, your team and your priority and returns a recommendation with reasons and trade-offs.
Is TanStack Start mature enough for production?
For the right project, yes, but it is much younger. Next.js has been around since 2016, and the App Router has been the recommended way to build with it since Next.js 13.4 in 2023. TanStack Router has been stable for a while, but Start spent a long time in beta, and its build setup and some APIs changed between releases. Before you commit, read the TanStack Start docs and the release notes on GitHub for the current status.
Pin your versions
On a younger framework, pin exact package versions and read the changelog before every upgrade, so a minor release does not change routing or server function behaviour under you.
Which has the bigger ecosystem?
Next.js, by a distance. Most headless CMS vendors, auth libraries and analytics tools publish a Next.js starter or integration guide, and Vercel keeps a large library of templates. If you are pairing it with a CMS, my post on headless WordPress with Next.js covers when that setup is worth it.
TanStack Start works with any plain React library, and it pairs naturally with TanStack Query, Table and Form. What you will find less of is ready-made glue: fewer starters, fewer copy-paste integration guides and fewer answers when you search an error. You write more of that wiring yourself. Libraries that depend on Next.js-specific APIs, such as next/image, next/navigation or middleware, do not move across at all.
How hard is it to migrate between them?
Because both are React, your components survive. The framework-specific layers are what you rewrite.
| Part of the app | What happens | Effort |
|---|---|---|
| Components and styling | Move across mostly as-is, including Tailwind CSS | Low |
| Routing and layouts | Rewritten to the other framework's file conventions | Medium |
| Data fetching | Server Components become route loaders, or the reverse | Medium to high |
| Metadata and SEO tags | generateMetadata becomes a head function, or the reverse | Low to medium |
| Server code | Route handlers and server actions become server routes and functions | Medium |
| Images and fonts | next/image and next/font need a replacement | Medium |
Plan the move route by route, keep URLs identical wherever you can, and compare the rendered HTML and tags of each page before and after.
What does hosting cost on each?
For most marketing sites, hosting is small next to build and maintenance cost. Vercel's Hobby plan is free but limited to non-commercial use, and its Pro plan starts at $20 per member per month, with usage charges on top (Vercel pricing). Cloudflare Workers has a free tier and a paid plan from $5 a month (Cloudflare Workers pricing). TanStack Start's hosting guide lists the targets it supports, from Node servers to edge platforms. Next.js runs on Cloudflare too, with more setup; I compare the two in Vercel vs Cloudflare for Next.js. Bills grow with traffic, image optimisation and function calls, so check those limits rather than the headline plan price.
Is one faster than the other?
Not in a way that should decide your project. Both send complete HTML from the server, both split code by route, and both can be served from a CDN or an edge network. Speed comes from what you put on the page: image weight, font loading, third-party scripts and how much JavaScript the browser has to run. A heavy page is slow on either framework, and a lean page is fast on either.
What differs is how much you get for free. Next.js handles responsive images and self-hosted fonts for you. On TanStack Start you choose your own approach: serve pre-sized images from a CDN or image service, compress them before upload with a tool like Under1MB, and self-host fonts with a sensible font-display setting. It is more work, but not hard.
Does the choice change your SEO?
The framework only gets you server-rendered HTML. Everything else is the same work on both:
- A unique title, description and canonical URL per page.
- JSON-LD structured data matched to each page type: Organization or Person on the home page, BreadcrumbList on inner pages, BlogPosting or Article on posts, Product on product pages and FAQPage where a page answers questions. My JSON-LD guide shows how to add it.
- A generated sitemap and an
llms.txtfile, both built from the same content the pages render. - 301 redirects for any old URLs that change. If you are coming from WordPress, the free Redirect Map Builder turns a list of old URLs into a Next.js redirects array, and my guide to moving from WordPress to Next.js without losing SEO covers the rest.
My technical SEO checklist for Next.js covers that layer in full, and almost all of it applies to TanStack Start too.
What would I pick today?
For a client marketing site, a SaaS site or a store frontend: Next.js. It is the choice the next developer will thank you for. For a product with app-like data flow that I or a small team will own: TanStack Start.
I build on both through my Next.js and React websites service. If you are choosing for a specific project, send me a few lines about it or book a 20-minute call, and I will tell you which I would use and why.
