Vite is a build tool: a fast dev server plus a bundler that turns your React code into static files in dist. Next.js is a framework that adds file-based routing, server rendering and server code. Choose Vite for client-only apps and widgets, and Next.js when pages need HTML from the server or backend logic.
| Question | Vite (React template) | Next.js |
|---|---|---|
| What is it? | Dev server and bundler | Full React framework |
| Default dev URL | http://localhost:5173 | http://localhost:3000 |
| Build output | Static files in dist/ | .next/ for a Node server, or out/ with static export |
| Routing | Bring your own (for example React Router) | Folders and files in app/ |
| Server code | None by default | Route handlers, server components, server actions |
| Minimum Node.js | 20.19+ or 22.12+ | 20.9 |
Updated
People compare these two as if they were rivals, but they sit at different layers. Vite only builds and serves your code, while Next.js decides how pages are routed, rendered and deployed. Tick what your project needs below to get a reasoned pick, then read the side by side details.
| Topic | Vite | Next.js |
|---|---|---|
| Start a project | npm create vite@latest | npx create-next-app@latest |
| Dev command | vite (npm run dev) | next dev (npm run dev) |
| Default dev port | 5173, tries the next free port if taken | 3000, change with -p or PORT |
| Preview a build locally | vite preview on port 4173 | next start on port 3000 |
| Production bundler | Rolldown | Turbopack by default, webpack with --webpack |
| Rendering | In the browser (SSR possible with your own server) | Server, static or client per component |
| Static hosting | Yes, upload dist/ | Yes with output: 'export', upload out/ |
| Full feature hosting | Not needed | Node.js server, Docker or an adapter |
The react-ts template gives a TypeScript React app. The build lands in dist, which you can check with the preview server.
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev # http://localhost:5173
npm run build # writes dist/
npm run preview # serves dist/ on http://localhost:4173strictPort makes Vite stop with an error instead of quietly moving to another port, which keeps OAuth callback URLs stable.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: { port: 5173, strictPort: true },
});next build compiles into .next, and next start serves it with every server feature switched on.
npx create-next-app@latest my-app --yes
cd my-app
npm run dev # http://localhost:3000
npm run build # writes .next/
npm run start # production server on port 3000With this setting next build writes HTML files to out/, ready for any static host.
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
};
module.exports = nextConfig;Vite takes your source files, serves them during development with hot module replacement, and produces optimised static assets when you build. It has no opinion about routing, data loading or where pages render.
Next.js makes those decisions for you. A file at app/blog/page.tsx becomes the /blog route, components render on the server by default, and the same project can hold API endpoints. That structure is helpful when you want it and extra weight when you do not.
A Vite React app sends a nearly empty index.html, then JavaScript builds the page in the browser. Crawlers that run JavaScript can read it, but the first response itself carries little content.
A Next.js page can arrive as complete HTML, rendered at build time or on each request. For blogs, docs and landing pages that difference matters for search and for slow phones.
Static output from Vite runs on any file host or CDN with a single rewrite rule. A full Next.js app needs a Node.js server, a container or a platform with a Next.js integration to keep every feature working.
If you only need static pages from Next.js, static export gives you an out folder you can upload anywhere, at the cost of the server-only features listed in its docs.
No. Next.js ships its own bundler setup. Current versions use Turbopack by default for next dev and next build, with a --webpack flag to switch back. Vite uses its own dev server and bundles production code with Rolldown.
You normally do not. Next.js routes come from the folder structure inside app/, and its Link component handles client navigation. React Router is the usual choice in a Vite app, where nothing decides routes for you.
They solve different problems, so there is no single honest number. Vite starts quickly because it serves source files on demand during development. Next.js can send finished HTML on the first request, which helps the first paint of content pages. Measure your own app instead of trusting a general benchmark.
The dist folder is plain HTML, CSS and JavaScript, so any static host can serve it, including the free tiers many static hosts offer. Remember to add a rewrite so deep links load index.html.
Move each route into a folder under app/ with a page.tsx file, mark components that use state or browser APIs with 'use client', and replace React Router links with next/link. Plan it route by route rather than all at once.
Related: Next.js vs React, How to deploy a React app, Next.js App Router guide, React Router examples, localhost:3000 explained.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.