Full page refresh when following links in the new root app

[eatyourgreens]

Package

Examples

• app-root

Describe the bug

Next.js builds and deploys app-root as a single page React app, which should use client-side navigation (next/link) to move between pages/views. When I click 'More stats' to go to the user stats page, or 'Back' to go to the home page, the browser performs a full-page refresh, which downloads and mounts the entire React app, even though it's already running.

The React app that Next.js builds for app-root is ~2MB of JS, so there's a lot of redundant requests for JS files when you load a new page from scratch. Also some extra delay while the React app mounts and hydrates on each page.

To Reproduce

Steps to reproduce the behavior:

1. Go to the Zooniverse home page.
2. Click on More Stats.
3. See that the browser performs a full page refresh.
4. Click Back.
5. See that the browser performs a full page refresh again.
6. Go back to your user stats page and click Generate Volunteer Certificate.
7. That link also performs a full-page refresh and re-mounts the React app.

Expected behavior

Either use client-side routing between pages/views in your Next.js Single Page App, or (if possible) configure the build so that it doesn't build an SPA.

Additional context

To see how navigation should work in a Next.js app, go to https://www.zooniverse.org/about and click on the various links to pages within the About section. Each of those links uses client-side routing to update the page, rather than linking to a new page. The React app loads and mounts once, when you enter the About section, then uses client-side routing thereafter.