Next.js single page application?

Question

I am trying to make a single-page application in Next.js, but I am starting to think this is not possible. Can anyone show me how?

My first attempt was to use a HashRouter:

<HashRouter>
  <div>
    <NavLink to="/">Home</NavLink>
    &nbsp;&nbsp;
    <NavLink to="/purchaseComplete">Purchase Complete</NavLink>
  </div>
  <div>
    <Route exact path="/" Component={Default} />
    <Route path="/purchaseComplete" Component={PurchaseComplete} />
  </div>
</HashRouter>

But in the browser I see "Invariant failed: Browser history needs a DOM"

I then tried to use a StaticRouter:

<StaticRouter location="/" context={staticContext}>
  <div>
    <NavLink to="/">Home</NavLink>
    &nbsp;&nbsp;
    <NavLink to="/purchaseComplete">Purchase Complete</NavLink>
  </div>
  <div>
    <Switch>
      <Route exact path="/" Component={Default} />
      <Route path="/purchaseComplete" Component={PurchaseComplete} />
    </Switch>
  </div>
</StaticRouter>

This renders the two links, but nothing happens when you click them.

In the Next.js tutorials, they talk about SPA's in the beginning, but then they only show you how to make apps with multiple pages.

I am starting to think it's not possible to build an SPA in Next.js. Can anyone confirm this? Or can someone show me how to build an SPA in Next.js?

Answer 1

If you're using Next.js 9.5 or later the correct way to do this is with Rewrites. Do not use a custom server, it makes maintaining and deploying your site much harder and just isn't necessary here.

There is a detailed tutorial on how to do this here. The basic idea:

1. Create a custom App (/pages/_app.tsx)

2. Return null if typeof window === "undefined". This is required to prevent react-router from throwing errors during the SSR step!

// pages/_app.tsx

import { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {
  return (
    <div suppressHydrationWarning> // <- ADD THIS
      {typeof window === 'undefined' ? null : <Component {...pageProps} />}
    </div>
  );
}

export default App;

3. Rewrite all routes to the homepage

// next.config.js

module.exports = {
  async rewrites() {
    return [
      // Rewrite everything else to use `pages/index`
      {
        source: '/:path*',
        destination: '/',
      },
    ];
  },
};

There is a lot more context/explanation in the linked tutorial but this will get you started.

Answer 2

I found a blog post that answers this question: https://dev.to/toomuchdesign/next-js-react-router-2kl8

It turns out that Next.Js is intended to be used for multi-page apps.

The author explains how it is possible to use the React Router to make a single-page app with Next.JS. However, he also says the Next.JS authors responded and said they don't intend for Next.JS to be used this way!

I totally agree with the author, and am using his approach in my app. I want server-side rendering from NextJS, but also want it to be a single-page application.

Answer 3

I am confused by the notion that Next.js is a SPA. How can it be a SPA when you get redirected to a different page and it gets re-rendered in a browser. Instead of SPA which only refreshes part of the page.

Also when we redirect to different page, we lose all the data in the store(Redux store) in memory, as the page is refreshed and new page is rendered. So I think calling Next.js a SPA is not the right way to go. Its similar to traditional SSR apps like EJS, Jade in Express.js, but instead we do SSR separately on client side by having a next.js server for it to server side render.

Answer 4

Currently, you need to hack away NextJS to make it work as SPA , there's already a RFC that would solve all these issues layouts-rfc

Edit: layouts are now a thing on NextJS 13