Next.js 10: The Full-Stack React Framework Comes of Age

Next.js 10, released October 2020, is the release that cemented Vercel’s framework as the default choice for React applications that need more than create-react-app can offer. It strikes the right balance between the developer experience of a SPA and the performance characteristics of a server-rendered site.

Three Rendering Strategies

Next.js 10 cleanly exposes three strategies for each page:

• Static Generation (getStaticProps) — HTML generated at build time, served from CDN
• Server-Side Rendering (getServerSideProps) — HTML generated on each request
• Incremental Static Regeneration (ISR) — static with background revalidation

Incremental Static Regeneration

ISR is the killer feature of Next.js 10. Add revalidate to getStaticProps and Next.js will regenerate the page in the background at most once every N seconds — giving you static-site performance with near-real-time data:

export async function getStaticProps() {
    const posts = await fetchPosts();
    return {
        props: { posts },
        revalidate: 60, // Regenerate at most once per minute
    };
}

Built-in Image Component

The next/image component automatically generates responsive srcsets, serves modern formats (WebP), lazy-loads by default, and prevents Cumulative Layout Shift via intrinsic sizing. Replacing every <img> with <Image> is one of the fastest Lighthouse score improvements available:

import Image from 'next/image';

<Image
    src="/hero.jpg"
    alt="Hero image"
    width={1200}
    height={630}
    priority
/>

i18n Routing

Next.js 10 builds internationalised routing directly into the framework. Define your locales in next.config.js and Next.js handles locale detection, subdomain routing, and prefix-based routing automatically.

API Routes

Files in the /pages/api/ directory become serverless API endpoints. For simple backends — form submissions, webhooks, database queries — API routes eliminate the need for a separate Express server:

// pages/api/posts.js
export default async function handler(req, res) {
    const posts = await db.collection('posts').find().toArray();
    res.json(posts);
}

Performance Budget

Next.js 10 ships with an experimental experimental.optimizeFonts flag that inlines Google Font CSS, reducing render-blocking requests. Combined with automatic code splitting per page, real Next.js apps routinely score 95+ on Lighthouse.

If you are building a new React application in 2021, the default choice should be Next.js unless you have a specific reason to choose otherwise. The framework handles the hard parts — routing, rendering strategy, image optimisation — so you can focus on product.