In times when the official React documentation says:
"If you want to build a new app or website with React, we recommend starting with a framework."
It's pretty understandable that any developer new to React will choose Next.js by default (It's also the first suggestion on the page).
But is Next.js really a sensible default?
React on the server
"Full-stack frameworks do not require a server.", that is what the React docs say, and it is true, Next.js and other full stack frameworks do have static exports, and React's docs do point to a page in Next.js's docs that explains this.
However, the project initialization command (also the first terminal command in the docs page) is this:
npx create-next-app@latest
This command creates a regular Next.js app with a server, so unless developers specifically research static exports, many will end up with a server even though they never wanted or needed one.
The Old Way
In a time, not that long ago, the default way to use React was create-react-app, a CLI tool that created and managed react project which were all Single Page Apps by default.
As time went on, the project stopped being maintained, became outdated, and was eventually abandoned and archived.
This leaves create-react-app projects looking for a migration path, and many developers are choosing Next.js, even when they haven't used a server before in their create-react-app projects.
Personally, I still believe SPA is the most reasonable default for new React projects.
Next.js SPA
To create a SPA with Next.js you need to edit your next.config.ts file like so:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
output: 'export',
}
export default nextConfig
This will generate an out folder with all of the static assets of your app (HTML, CSS, JS) that can be hosted without a server.
Next.js's docs state that there are benefits to using the SPA mode:
However, a quick look at the list of unsupported features makes it clear that SPAs aren't the primary use case for Next.js:
While you can build SPAs with Next.js, it’s not designed for it and in many cases, a simpler tool is more than enough.
Vite based SPA
Vite is a build tool for modern dev projects, and has plugins for React, Vue and more.
Vite can be used to build a Single Page App with React and is a closer alternative to create-react-app than other frameworks/tools as it is SPA by default and supports many things that create-react-app supported out of the box.
Vite is mentioned in the React docs in a page called "Build a React app from Scratch" but it's clear that the React developers believe frameworks and the server to be the way forward for React.
You Might Not Need A Server
A developer on twitter built a cool website called PatternCraft that allows users to browse and copy background patterns.
Like most new React developers, they used Next.js.
As the site gained popularity, they encountered this issue:
They've reached the free plan limits for server function calls, but, why are function calls needed for a website of this kind?
Looking through it, all of the content is static, there's no auth, and in fact, the entire list of patterns is stored in a single typescript file.
Seems like there isn't a valid reason to use a server, using Next.js was the default way and they just went with it.
Had they used Vite or Next.js's static export, they could've hosted their website for free in a static hosting site like Github Pages or Cloudflare Pages.
The Outcome
Fortunately, PatternCraft's story ends on a high note:
Which is pretty cool, they got sponsored and can continue on, but not every developer is going to get that lucky.
This case shows the importance of understanding React and the ecosystem in order to make the right choices when starting a new project.
Conclusion
You may already know the excellent React documentation section titled “You Might Not Need an Effect.”
I propose another: “You Might Not Need a Server.”
It could start like this:
Do you need a server? if the answer is "Yes" then use Next.js.
if the answer is "No", you should use Vite and consider Github Pages or Cloudflare Pages to host your Single Page Application.
Have you encountered uses of Next.js where a simple Vite SPA would suffice? Share your stories in the comments!
Top comments (2)
Yes, I agree — Next.js can feel a bit clunky and heavy for a full-stack front-end project. While it offers a lot of features, there are already more efficient and proven alternatives. Personally, I find that Vite provides a much smoother development experience and is likely to have more staying power. It’s just my perspective based on working with both frameworks. Good article, keep it up.
Great article! While it has a lot of powerful features, NextJS might not always be the best default, especially if you want a simple SPA.