next/link causes page refresh

[Toine Kamps]

Hi there,

First of all thanks for this useful example repo, it was exactly what I was looking for without a lot of complex nginx rules etc!

I implemented this in my project and it is working nicely, however every next/link is causing a page refresh now when navigating between pages (on both servers admin & member).
(This is probably a duplicate of #2)

If I use the simplest example from the next/link docs:

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

And add a dynamic [slug].js route in the member folder:

import React from 'react';
import PropTypes from 'prop-types';

const Page = ({
	pageSlug = null
}) => {
	return <p>Page: {pageSlug}</p>
}

Page.getInitialProps = async context => {
	const {slug: pageSlug} = context?.query;

	return {
		pageSlug
	};
}

Page.propTypes = {
	pageSlug: PropTypes.string
};

export default Page;

Every link click results in a page refresh with this error in my console:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (about.js, line 0)
[Log] Error: Failed to load script: /_next/static/chunks/pages/about.js

I think it's looking for a route one level up in the root of the pages folder?
When I log the request in server.js I see the following:

client_1  | /_next/static/chunks/webpack.js
client_1  | /_next/static/chunks/main.js
client_1  | /_next/static/chunks/pages/public.js
client_1  | /_next/static/chunks/react-refresh.js
client_1  | /_next/static/chunks/pages/_app.js
client_1  | /_next/static/development/_buildManifest.js
client_1  | /_next/static/development/_ssgManifest.js
client_1  | /_next/static/chunks/0.js
client_1  | /_next/static/development/_devPagesManifest.json
client_1  | /_next/webpack-hmr
client_1  | /_next/static/chunks/pages/about.js
client_1  | /about
client_1  | /_next/static/chunks/main.js
client_1  | /_next/static/chunks/webpack.js
client_1  | /_next/static/chunks/pages/_app.js
client_1  | /_next/static/chunks/pages/public/%5Bslug%5D.js
client_1  | /_next/static/chunks/react-refresh.js
client_1  | /_next/static/development/_buildManifest.js
client_1  | /_next/static/development/_ssgManifest.js
client_1  | /_next/static/chunks/0.js
client_1  | /_next/webpack-hmr

However when I add a catch-all route there, it will use that one instead?
Any thoughts on this?

Thanks!

[Toine Kamps]

You can fix the routing for the member pages by using the root of the pages folder instead of using a member folder.

As for the admin routing;
I only got this working when you specify the next/link as:

<Link
  as="/admin/sample-page"
  href="/admin/[slug]">
  <a>Sample Page</a>
</Link>

I haven't found a way to get rid of the /admin/ part in the next routing...
When you directly navigate to an url without the /admin/ part it will load correctly, but when you want to navigate to another page within the admin routing, you need the /admin/ part.

Only works on first page load:

http://admin.lvh.me:3000
http://admin.lvh.me:3000/sample-page

Works on first page load & internal next routing:

http://admin.lvh.me:3000/admin/
http://admin.lvh.me:3000/admin/sample-page

But this defeats the purpose of having a subdomain in my opinion.
So without the custom server.js, these routes will still work:

http://lvh.me:3000/admin/
http://lvh.me:3000/admin/sample-page

I would love to get some thoughts on this!