Next.js: Custom server hapi does full page reload when path is a subfolder

[jonaswindey]

I'm trying to integrate a custom Hapi server (to have both an API and a Next project in the same server) and I'm getting an issue when the route is a subfolder.

Example was taken from https://github.com/zeit/next.js/tree/canary/examples/custom-server-hapi and modified with an additional route

  server.route({
    method: 'GET',
    path: '/b',
    handler: pathWrapper(app, '/b')
  })

  server.route({
    method: 'GET',
    path: '/b/{id}',
    handler: pathWrapper(app, '/b')
  })

Steps to reproduce: Clone project at https://github.com/jonaswindey/custom-server-hapi-app

When you run the page and you click on /b you see immediate client-side routing. When you click on /b/test you will see a full page refresh.

Expected behaviour: link to route should load client-side

Latest next version (5.0.0)

[dcalhoun]

This appears to impact _any_ type of custom server, not just Hapi. I have deployed an additional test case with a generic custom server. You can also review the test case source.

@jonaswindey it may be a good idea to update your issue's title to not be Hapi specific, as this appears to impact all custom servers.

Subfolder paths in custom server force full-page refresh

[timneutkens]

The issue is actually just wrong usage of <Link>

href is the path in pages

as is the path you see in the browser

Taken @dcalhoun's example:

<Link href="/static-page/nested">

What this does is try to load pages/static-page/nested.js, this file doesn't exist, so it refreshes the page (in next 4 this would show a client side 404). This is to facilitate the multi-zones feature. Since the path could be handled by another zone.

Instead what you're trying to do is link to pages/static-page-nested.js with the path /static-page/nested. So the correct link would be:

<Link href="/static-page-nested" as="/static-page/nested">

I hope this makes sense to both of you 👍