Next.js – when it is the right choice and when to choose something else

Definition

Next.js is an open-source framework for React-based websites and applications, developed by Vercel since 2016. It is the de facto standard for serious React-based product websites.

Next.js is an open-source framework for building modern websites and applications on top of React. It is developed by Vercel (also its main commercial hosting platform), and since its launch in 2016 it has grown from a simple SSR framework into a comprehensive full-stack platform that supports everything from static pages to server-rendered applications, edge functions and AI features.

Today, Next.js is the de facto standard for serious React-based product websites. Its complexity has also grown considerably in recent years, making it a more capable but less easy-to-use tool than it was in 2020.

How Next.js is structured

Next.js is built on file-based routing – the structure of the app/ folder mirrors the URL structure in the browser. Since version 13 (2022), the App Router has existed alongside the older Pages Router. The App Router introduces:

• React Server Components as the default – components are rendered on the server and send minimal JavaScript to the client.
• Streaming SSR – pages can start being delivered to the browser before all the data has been fetched.
• Layouts and nested routes that persist across navigations.
• Server Actions – forms and data mutations can be handled directly on the server without writing separate API routes.

The rendering models Next.js supports:

• Static Site Generation (SSG) – pages are built at build time.
• Server-Side Rendering (SSR) – pages are rendered on every request.
• Incremental Static Regeneration (ISR) – pages are static but are rebuilt incrementally according to set rules.
• Client-Side Rendering – when needed.
• Edge Rendering – runs on Vercel's (or Cloudflare's) edge nodes, closer to the user.

Being able to choose between these route by route is both Next.js's strength and a frequent source of complications.

What Next.js is good at

• Versatility. Few frameworks cover such a broad range of use cases. A marketing website with 50 static pages? Works. A SaaS dashboard with thousands of dynamic routes? Works. E-commerce with ISR and edge personalisation? Works.
• The React ecosystem. Next.js is built on React, so you have access to the entire React world – UI libraries, state management, form handling, animation libraries, integrations.
• Server Components. When they work well, the App Router and Server Components are a substantial step forward. The JavaScript payload shrinks dramatically compared with traditional React.
• The Vercel integration. For teams that host on Vercel, the experience is smooth – preview deploys per branch, edge functions, image optimisation, analytics.
• Strong TypeScript support. First-class.
• Mature documentation and a large community.

Where Next.js has become complex

• App Router and Pages Router side by side. Since the App Router was introduced, Next.js has been able to run both patterns at once – which means two ways of solving the same problem.
• The caching model. Caching in the App Router is powerful but confusing. Data caching, request memoisation, the route segment cache, the full route cache, the router cache – several layers interact.
• Server Components vs Client Components. Knowing which components run where, and how they can communicate, means learning a mental model that is new to many React developers.
• Release pace. Next.js ships a major version roughly every 12–18 months, and the migrations are not trivial.
• The JavaScript payload can get large. Next.js sends more JavaScript to the browser than Astro or static HTML builds. It can be optimised, but it takes discipline.

When we recommend Next.js

At SEOS Design we recommend Next.js when:

• The website is (or will become) an application, not just a marketing website.
• Complex dynamic flows – auth, payments, dashboards, real-time features – are on the roadmap.
• The team works in React and has experience with the Server Components model, or is willing to learn it.
• Hosting on Vercel or a similar platform has been chosen or is being considered.
• The headless CMS offers good Next.js integrations (as Sanity, Contentful, Storyblok and others do).

We describe how such a build works in practice in our guide to AI-assisted web development with Next.js and a headless CMS.

We recommend something else when the website is mainly content and performance is paramount (Astro is often better then), when the team works in Vue (Nuxt is the more natural choice), when it is a marketing website where visual editing and fast delivery matter most (Webflow is often the right choice), or when budget and in-house skills are limited.

Next.js vs React – what is the difference?

React is the library; Next.js is the framework around it. React handles components and the rendering of user interfaces, but takes no position on routing, data fetching or how pages are delivered to the browser. Next.js fills in the rest: file-based routing, rendering models (SSG, SSR, ISR), image optimisation, metadata handling and API routes.

So the question is rarely "Next.js or React" – if you choose Next.js, React comes as part of the package. The real question is whether you need the framework's structure, or whether a pure React build is enough – for example, an application behind a login that search engines should never index.

Next.js vs Astro – in brief

• Next.js for applications, dashboards, e-commerce, dynamic SaaS products and websites where the same stack is meant to run both the marketing website and the product.
• Astro for content-heavy websites – blogs, documentation, knowledge bases, programmatic SEO, marketing websites without heavy interactive parts.

Many agencies work with both and choose project by project – as do we. The choice of framework is also often tied to the content architecture – more on that in our guide to CMSs for large companies.

Which CMS works with Next.js?

Next.js is almost always used together with a headless CMS. Sanity, Contentful and Storyblok all have first-class Next.js integrations – official SDKs, draft previews and support for ISR, so content updates go live without the whole website being rebuilt. Choosing between them comes down to the editor experience, the pricing model and the complexity of the content model more than technical compatibility.

Considering Next.js with a headless CMS for your next website? Read about our approach to web development on our services page.

Next.js and SEO

Next.js is fully capable of good SEO – but only if you do the right things. These are the most common pitfalls:

• Client-rendered content gets missed. If critical content is rendered in a "use client" component that depends on data fetched after mount, Google may not see it. Solve it by fetching the data in a Server Component and passing it down as props.
• Metadata via the client. The generateMetadata API is where metadata belongs. If you set the title and meta description via JavaScript on the client, it will work for some crawlers and not for others.
• Caching conflicts. If a page is cached where it should not be – or is not cached where it should be – it can lead to old information lingering in Google's index or to duplicate content.
• Lighthouse scores. Next.js websites can achieve excellent Lighthouse scores, but not automatically. The Image component, font optimisation, bundle splitting – all of it has to be configured deliberately.
• Structured data. Trivial to add as a script element with type="application/ld+json" in layouts or per route.
• Internationalisation. Next.js has built-in i18n support. Combining it with correct hreflang and canonicals takes discipline but is entirely doable.
• Sitemap and robots. In the App Router, these are generated via sitemap.ts and robots.ts.

Common SEO pitfalls with Next.js

These are familiar patterns in Next.js projects:

• Websites that migrate to Next.js from a simpler stack and lose rankings for 2–3 months because of technical SEO errors that were not caught during the build – we explain how to avoid that in our guide to migrating a website without losing rankings.
• ISR strategies that mean updated content is visible to users but not to Google for days or weeks.
• Server Components that call expensive APIs on every request and push up response times on pages Google fetches often.

None of this is an inherent flaw in Next.js. It is the consequence of a framework powerful enough to allow mistakes that simpler frameworks would not.

Summary

Next.js is the industry standard for React-based product websites and applications. It is versatile, powerful and has the largest ecosystem – but it is also a complex framework that requires an in-depth understanding of Server Components, caching and rendering models. For applications and dynamic websites, it is often the right choice. For pure content websites where performance is paramount, consider Astro. As with any modern framework, SEO is only good when someone deliberately makes it so. Next.js makes that entirely possible – not automatic.