React revolutionised how we build user interfaces, but vanilla React leaves many production concerns unanswered: server-side rendering for SEO, code splitting for performance, routing conventions, API integration patterns, and deployment strategies. Next.js, created by Vercel, fills every one of these gaps and has quickly become the most popular way to build production React applications.

At StrikingWeb, Next.js has become our default choice for React projects. After deploying dozens of Next.js applications for clients ranging from e-commerce stores to SaaS dashboards, here is our comprehensive overview of what makes it exceptional.

Server-Side Rendering (SSR)

The biggest limitation of client-side React applications is that search engines and social media crawlers receive an empty HTML shell that only populates after JavaScript executes. Next.js solves this with built-in server-side rendering. When a user (or crawler) requests a page, Next.js renders the React components on the server and sends fully-formed HTML to the browser.

// pages/products/[id].js
export async function getServerSideProps({ params }) {
  const res = await fetch(
    `https://api.example.com/products/${params.id}`
  )
  const product = await res.json()

  return { props: { product } }
}

export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>${product.price}</span>
    </div>
  )
}

The getServerSideProps function runs on every request, fetching fresh data before the page renders. This is ideal for pages where data changes frequently and must always be current.

Static Site Generation (SSG)

For pages where content does not change on every request, Next.js offers static site generation. Pages are pre-rendered at build time and served as static HTML from a CDN, delivering the fastest possible load times.

// pages/blog/[slug].js
export async function getStaticPaths() {
  const posts = await getAllPosts()
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    })),
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const post = await getPostBySlug(params.slug)
  return { props: { post } }
}

Next.js 9.5 introduced Incremental Static Regeneration (ISR), which lets you update static pages after deployment without rebuilding the entire site. You specify a revalidation interval, and Next.js regenerates the page in the background when a request comes in after the interval has elapsed.

API Routes

Next.js includes a built-in API layer. Any file in the pages/api directory becomes a serverless API endpoint. This eliminates the need for a separate backend for simple use cases like form submissions, webhook handlers, or data aggregation layers.

// pages/api/contact.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' })
  }

  const { name, email, message } = req.body
  await sendEmail({ name, email, message })

  res.status(200).json({ success: true })
}

API routes are deployed as serverless functions on platforms like Vercel, scaling automatically with demand and costing nothing when idle.

File-Based Routing

Next.js uses the file system as its routing convention. Creating a file at pages/about.js automatically creates a route at /about. Dynamic routes use bracket syntax: pages/products/[id].js matches /products/123. Nested routes, catch-all routes, and optional catch-all routes are all supported.

This convention-over-configuration approach eliminates the need for a separate router configuration and makes the project structure immediately understandable to any developer.

Built-In Performance Optimisations

Next.js automatically handles many performance optimisations that developers would otherwise need to configure manually:

When We Choose Next.js

At StrikingWeb, we reach for Next.js when a project needs any combination of:

  1. SEO-critical pages that must be fully rendered for search engine crawlers.
  2. Fast initial load times where server-rendered or statically generated pages outperform client-only rendering.
  3. Content-driven websites with blogs, documentation, or marketing pages that benefit from static generation.
  4. E-commerce storefronts where product pages need SSR for SEO and ISR for fresh pricing data.
  5. Full-stack applications where API routes eliminate the need for a separate backend service.

Deployment Options

Next.js deploys seamlessly to Vercel (its creators' platform), but it runs well on any Node.js hosting environment. Common deployment targets include:

Next.js has solved the React deployment problem. It gives teams a clear, opinionated path from development to production without locking them into a single hosting provider.

The Growing Ecosystem

The Next.js ecosystem continues to expand rapidly. Integrations with headless CMS platforms (Contentful, Sanity, Strapi), e-commerce engines (Shopify, Saleor), authentication providers (NextAuth.js), and database tools (Prisma) make it possible to build complete applications without stitching together a complex stack from scratch.

If you are starting a new React project in 2020, Next.js should be your default starting point. It handles the hard problems of production web development so your team can focus on building features that matter to your users.

Next.js React SSR Web Development
Share: