Previous/next page navigation disappears when using --prefix-paths

[fwouts]

🐛 Bug Report

When using gatsby build --prefix-paths to serve the documentation website under a prefix such as /my-project/, the previous/next links at the bottom of each page disappear.

Note that other types of navigation don't seem to be affected.

To Reproduce

See https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

Steps to reproduce the behavior:

1. Add pathPrefix: "/hello" to gatsby-config.js
2. Run gatsby build --prefix-paths
3. Run gatsby serve --prefix-paths and navigate to http://localhost:8000/hello
4. Notice that previous/next links are missing at the bottom of each page.

Expected behavior

The previous/next links should still appear, and have the expected prefix.

Link to repl or repo (highly encouraged)

fwouts/smooth-doc-starter@master...fwouts:path-prefix-bug

Compare running:

yarn gatsby build && yarn gatsby serve # works fine
yarn gatsby build --prefix-paths && yarn gatsby serve --prefix-paths # no navigation

Run npx envinfo --system --binaries --npmPackages smooth-doc,gatsby,react,react-dom --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.2.1
 - CPU: (8) arm64 Apple M1
 - Memory: 109.27 MB / 8.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 15.8.0 - /opt/homebrew/bin/node
 - Yarn: 1.22.10 - /opt/homebrew/bin/yarn
 - npm: 7.5.0 - /opt/homebrew/bin/npm
## npmPackages:
 - gatsby: ^2.15.18 => 2.32.4
 - react: ^16.10.1 => 16.14.0
 - react-dom: ^16.10.1 => 16.14.0
 - smooth-doc: ^5.0.4 => 5.5.0

[fwouts]

I should note that I'm happy to send out a PR to fix this, given a few pointers to the right area of the code 🙂

[gregberge]

Hello @fwouts, sorry for the delay, you can find some hint here:

smooth-doc/smooth-doc/src/components/SideNav.js

Lines 125 to 142 in 829a450

	export function useSideNavState() {
	const data = useStaticQuery(SideNavQuery)
	return React.useMemo(() => {
	const navGroups = groupNodes(data.allMdx.edges.map((edge) => edge.node))
	navGroups.sort(sortGroupsWithConfig(data.site.siteMetadata.sections))
	return { navGroups }
	}, [data])
	}
	export function useSideNavPrevNext({ navGroups }) {
	const { pathname } = useLocation()
	const nodes = navGroups.flatMap((group) => group.nodes)
	const nodeIndex = nodes.findIndex((node) => node.fields.slug === pathname)
	return {
	prev: nodeIndex > -1 ? nodes[nodeIndex - 1] : null,
	next: nodeIndex > -1 ? nodes[nodeIndex + 1] : null,
	}
	}