Is Next.JS a Single Page Application?

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 (
    <React.StrictMode>
      <Router>
        <Header />
        <ScrollToTop>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/page1" component={Page1} />
            <Route exact path="/page2" component={Page2} />
            <Route exact path="/page3" component={Page3} />
          </Switch>
        </ScrollToTop>
        <Footer />
      </Router>
    </React.StrictMode>
  );
}

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 (
    <div>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/jobs">Jobs</Link>
      </li>
      <li>
        <Link href="/about">About/Link>
      </li>
   </div>

  )
}

export default NarBar