Next.JS single page application?

Question

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

My first attempt was to use a Hash Router:

<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 NextJS 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 NextJS. Can anyone confirm this? Or can someone show me how to build an SPA in Next JS?

Answer 1

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.