Is Next.JS a Single Page Application?

Time to read
0 minutes


Next js single page is not considered a single page application. Single-page applications dynamically rewrite the content of the current page when the user navigates to a different page. Next.Js is using a file-based routing system.

If you are new to Next.JS, get started here: What is Next.js? Why developers love it!

What is a Single Page application?

A single-page application (SPA) rerenders the content of the present page based on the user input. For a more in-depth introduction to rendering in single-page applications, continue to read here. SPA has the advantage that a lot of elements that would otherwise stay the same do not need to be loaded again (Header, Footer, Sidebar etc.). Below you can see an example of a single-page application in React.JS.

/// yourportfolio/src/app.js

import React from "react";
import "./App.css";

// Various imports

function App() {
  return (
        <Header />
            <Route exact path="/" component={Home} />
            <Route exact path="/page1" component={Page1} />
            <Route exact path="/page2" component={Page2} />
            <Route exact path="/page3" component={Page3} />
        <Footer />

export default App;

Client-side rendering is however very problematic for SEO. Many search engine crawlers cannot easily process Javascript and the content of the page might therefore be invisible to the search engine. To make a client-side website SEO-friendly, you can prerender it.

How does Next.JS file-based routing work?

Next.js has a file-system-based router built on the concept of pages. As soon as a page is added to the pages folder, the page becomes available as a route (see below). For example, after adding csr.tsx to the singlePage folder, the page becomes available as a route.

Next.JS does support client-side routing though through the <Link/> component. Any <Link/> destinations that are statically generated will be pre-fetched once in sight. Client- and Server-side rendered routes will only be fetched upon <Link/> click. Client-side rendering in a SPA fashion avoids reloading duplicate content (footer, header, etc.).

import Link from 'next/link'

function NarBar() {
  return (
        <Link href="/">Home</Link>
        <Link href="/jobs">Jobs</Link>
        <Link href="/about">About/Link>


export default NarBar

Having website indexing issues?

Check out our blogs on the most common indexing issues and how to fix them. Fix your page indexing issues

Looking for an SEO Consultant?

Find the best SEO Consultant in Singapore (and worldwide). Best SEO Consultant

Is this you?

💸 You have been spending thousands of dollars on buying backlinks in the last months. Your rankings are only growing slowly.

❌You have been writing more and more blog posts, but traffic is not really growing.

😱You are stuck. Something is wrong with your website, but you don`t know what.

Let the SEO Copilot give you the clicks you deserve.