Contents
Tell Claude Code or ChatGPT "I want to build a web app" and you'll almost certainly hear "Let's use Next.js." For experienced developers that's a natural suggestion. Beginners, though, immediately wonder: "What is Next.js? How is it different from React? Do I really need it?"
The bottom line: for a beginner's first one or two projects, Next.js is "convenient," not "necessary." If the goal is to get something working, a lighter option (static HTML, Astro, Vite + React) is often enough. At the same time, React's official documentation recommends starting new apps with a framework and lists Next.js first. This article checks both sides against the React and Next.js documentation (as of October 1, 2026) and lays out where the line falls between using it and not.
This article's job is deciding what to do when AI recommends Next.js. How Next.js works (rendering modes, App Router, changes by version) is in What is Next.js?, and whether to host it on Vercel is in When AI says "Use Vercel".
Even if AI recommends it, your first project may not need it
— Three landing spots, decided by the size of what you want to build
AI often reaches first for the familiar "Next.js + Vercel + Tailwind" combination.
Adding one judgment of your own about scale changes how much you have to learn.
1. Why AI recommends Next.js — 3 reasons
AI tools have real grounds for suggesting Next.js. Here they are, in three points.
3 reasons AI recommends Next.js
Reason 1: The official docs recommend it
React's official page "Creating a React App" says that if you want to build a new app or website with React, it recommends starting with a framework, and lists Next.js (App Router) first. Published code and tutorials also contain plenty of Next.js examples. So recommending Next.js is a hard-to-get-wrong answer for an AI — but it isn't a judgment about whether it's best for your use case.
Reason 2: Everything you need is included
Plain React (Vite + React and the like) needs separate libraries for routing, server-side rendering, image optimization and APIs. Next.js provides them in one framework. It's reasonable for AI to conclude that there's "less to explain" and "less code."
Reason 3: A short path to going live
Next.js is developed and maintained by Vercel, as the React docs state. Vercel publishes your site on every push through GitHub integration, so there's little friction between writing code and going live. Vercel's free plan does come with conditions, such as being limited to non-commercial use. See When AI says "Use Vercel" for details.
2. What Next.js is — just enough to decide
Let's sort out the terms. Three are easy to mix up:
- JavaScript: the basic programming language that runs in web browsers
- React: a UI library created by Meta (formerly Facebook) for building screens from components
- Next.js: a framework on top of React, developed by Vercel, that bundles the mechanisms every web app needs — routing, server-side rendering, optimization and so on
A house-building analogy: JavaScript = lumber, React = hammer and saw, Next.js = a house kit with the frame (foundation, pillars, roof trusses) already assembled. You add interiors and furniture and can move in — but you have to follow the kit's rules.
As of October 1, 2026, the latest release is Next.js 16.3 (published August 3, 2026). For your decision, the pace of updates matters more than the version number. From July 2026 Next.js moved to monthly security releases announced in advance, and in September 2026 it shipped fixes with 16.3 as "Active LTS" and 15.5 as "Maintenance LTS" (Next.js blog). If you use it, plan on keeping up with those updates. The detailed explanation of how it works (SSR, SSG, ISR, App Router, changes by version) is in What is Next.js?
3. Do you need Next.js now? Where the line falls
Narrow down whether you need Next.js with five questions. After that come the fits and misfits stated in the official docs and a table of where the line falls.
5 questions: do you need Next.js?
If two or more of Q1–Q3 point to Next.js, it's a good fit.
If almost none do, a lighter option is worth considering.
Fits and misfits in the official docs (as of October 1, 2026)
The Next.js docs don't contain a list of "cases where it doesn't fit." Instead, React's "how to start" guidance and Next.js's "what runs where" guidance give you the material to decide.
| Source | What the original text says | What it means for your decision |
|---|---|---|
| React "Creating a React App" | Recommends starting new apps with a framework. Lists Next.js (App Router), React Router (v7) and Expo (for native apps) | For web apps, Next.js is one of the officially recommended candidates — not the only one |
| Same page, "Start From Scratch" | If your app has constraints existing frameworks don't serve well, you want to build your own framework, or you want to learn the basics of React, you can start from scratch (choosing routing and data fetching yourself) | Starting with plain React on Vite to learn is in line with the official guidance |
| Next.js "Deploying" | A Node.js server and Docker support all features; static export is limited; platform-specific integrations "may vary" in features and compatibility | Available features depend on where you host. All features run without Vercel |
| Next.js "Static Exports" | With static export, cookies, rewrites/redirects/headers configuration, ISR (periodic regeneration) and Route Handlers that rely on the request are not supported | If you want to put it on hosting that only serves static files, design without these or pick another option |
| Next.js blog | Since July 2026, monthly security releases announced in advance. As of September 2026, 16.3 is Active LTS and 15.5 is Maintenance LTS | If it runs on a server, ongoing patching is part of the deal |
Where the line falls — choosing Next.js or not
Putting the original sources and the five questions together, the dividing lines look like this (read the official statements and this article's summary separately).
| Condition | Choose Next.js | Don't (alternative candidates) |
|---|---|---|
| What you build | A web app mixing public pages with logged-in screens and APIs | A site that just lists articles (Astro, Hugo, WordPress) |
| Search traffic | Many pages you want in search results | Only screens behind a login (a Vite + React SPA) |
| Learning stage | You know React basics (components, props, state) | React itself is new (the React docs also show a from-scratch path) |
| Hosting | Node.js or Docker available, or a supporting PaaS such as Vercel | Only static files can be hosted; if you need server features, use a different setup |
| Operations | You can apply monthly security updates | No capacity to keep up (static sites are less exposed) |
| Existing assets | A new project | Laravel, Rails, Django, etc. already running |
4. Starting without Next.js — 4 main alternatives
Once you know "it doesn't have to be Next.js," four alternatives are realistic by use case.
| Option | Best for | Strengths | Weaknesses |
|---|---|---|---|
| Astro | Blogs, portfolios, landing pages | Outputs pages as HTML and adds JavaScript only where interaction is needed. Can mix React, Vue and Svelte components | Not suited to login-centered dynamic apps |
| Vite + React | SPAs, internal tools, to-do apps | Little configuration, runs right away. Lets you focus on React basics | Pages you want in search need a separate server-side setup |
| SvelteKit | You want server-side rendering but not necessarily React | Syntax close to HTML. Server-side rendering built in | What you learned in React doesn't carry over directly |
| HTML + Vanilla JS | Truly small sites | Zero dependencies; publish by uploading static files | Becomes hard to manage as it grows |
Concrete guidelines:
- Personal blog / article site → Astro. AI Arte itself runs on Laravel, but for a new static blog Astro is worth trying first
- To-do app, calculator, internal SPA → Vite + React. Also a good way to learn React basics
- "I don't want React" → SvelteKit. Its templates read close to HTML
- A single landing page → HTML + CSS. No framework needed
5. If you use it — 5 basics to know
Once you've decided on Next.js, these five basics are the minimum.
Basic 1: App Router vs Pages Router
Next.js has a newer approach (App Router) and an older one (Pages Router) side by side. Start new projects with the App Router (the official docs center on it). Many older tutorials assume the Pages Router, so make a habit of checking "is this for the App Router?"
Basic 2: Server Components and Client Components
This is the central idea of the App Router. Components are Server Components by default (rendered on the server). Parts that need interaction such as clicks become Client Components by writing 'use client' at the top of the file. Remembering "fetch data on the server, handle interaction on the client" avoids much of the early confusion.
Basic 3: File names are routes
app/about/page.tsx → /about, app/blog/[slug]/page.tsx → /blog/any-string. The folder structure is the URL. It's a different way of thinking from React Router and the like, so it takes getting used to.
Basic 4: Where environment variables go
Put API keys and similar values in .env.local. Add the NEXT_PUBLIC_ prefix only to values that may be sent to the browser; leave it off for server-only values. Getting this wrong and exposing a secret in the browser is a classic beginner accident.
Basic 5: Hosting beyond Vercel
According to the official Next.js "Deploying" page, a Node.js server (next start) and Docker run all features. Static export supports only some. Cloudflare, Netlify and others use their own integrations, which the docs say "may vary" in features and compatibility (Cloudflare and Netlify are working on verified adapters). All features run on your own server too, but you take on updates and monitoring. The conditions for Vercel are in When AI says "Use Vercel".
6. 3 pitfalls beginners fall into
Pitfall 1: "Make everything use client"
Adding 'use client' every time an error appears erases most of the benefit of rendering on the server. At that point Vite + React would be simpler. Keep "Client to a minimum, Server by default" in mind.
Pitfall 2: Learning the hosting terms too late
A typical story: you start on Vercel's free plan because the AI said so, then learn later that "adding ads makes it commercial, so the free plan no longer applies." Vercel's Hobby plan is limited to non-commercial personal use; Pro starts at $20/month with usage billed on demand (Vercel docs, as of October 1, 2026). The reverse also happens: you try to put the app on hosting that only serves static files and discover afterwards that redirects and ISR don't work. Decide where it will live before you start, and design with only the features that work there.
Pitfall 3: AI writes old Pages Router syntax
Because training data contains lots of older code, AI sometimes returns code using Pages Router-style getStaticProps or a pages/ directory. Simply saying "write it for the App Router" improves accuracy. See also Prompt tips.
next value from package.json and add one line like "App Router, TypeScript" — the generated code will contradict your project less often. Next.js 16.3 also added a way for coding agents to read docs matching your project's version with no setup (Next.js 16.3).
Summary
The key points of this article:
- Why AI recommends Next.js: the docs recommend it / batteries included / short path to going live — all valid, but separate from "best for you"
- React's docs recommend starting new apps with a framework, while also showing a from-scratch path for learning React basics
- Decide with five questions — what you build, search traffic, login/DB, React basics, hosting — and the dividing-line table
- Next.js runs all features on a Node.js server or Docker; static export supports only some. Vercel isn't required
- If you use it, plan on applying monthly security updates (since July 2026)
- Three pitfalls: everything use client / learning hosting terms too late / AI writing old Pages Router code
When AI says "let's use Next.js," pausing to ask whether you really need it before saying "OK" is the first professional move. Next.js is a powerful tool, but your first project may not need it.
FAQ
Yes. Next.js sits on top of React, so React basics such as components, props and state are essential. Going "React's official learning pages → a simple SPA with Vite → then Next.js" makes it easier to tell what's React and what's Next.js.
Similar names, different things. React Native is for building mobile apps (iOS/Android); Next.js is a framework for web apps. If you want a mobile app, look at Expo, which the React docs list for native apps.
Yes, but each provider has conditions. Cloudflare Pages' free plan allows 500 builds a month (official limits); Netlify's Free plan has 300 credits a month and stops at the limit (for accounts created since September 2025). A static export can be published anywhere that serves static files. Free-tier conditions by provider are summarized in What is PaaS (Vercel etc.)?
Server by default, Client only for interaction. Anything using useState, useEffect, onClick and so on needs 'use client'. Data fetching (fetch, database access) belongs on the server. When unsure, write it as a Server Component first and split out only the parts that error into Client Components.
Yes, it's the same series. Tools AI recommends as "standard" (Docker, Next.js, TypeScript and so on) are recommended because they're widely used, not because they're necessarily best for you. Beginners tend to assume "AI recommends it, so I need it"; the point of this article is to add one judgment of your own about scale, goals and learning stage.
