Next.js: Issue with custom routes rendering on client-side

[crqra]

Hello everyone,

I'm running into the following issue:

1. When I navigate to a given route, /projects/foo (server-side rendering) I get the page displayed without issues.

2. When I navigate to a given route, /projects/bar (client-side rendering, from inside the app) a message shows on the page, "An unexpected error has occurred.", and after ~5 seconds, the page reloads correctly and in terminal appears the following message: "Client pings, but there's no entry for page: /projects".

I'm not sure why I'm running into this issue and I'm glad if anyone can help me out...

I've created a sample repo for anyone to reproduce this issue (hopefully or not it will reproduce what I've described above).

https://github.com/joaocrq/nextjs-issue

If it's needed more info, let me know!

Thank you a lot!

cc @timneutkens

[aranajhonny]

This is what I could observe, the error is because you put the wrong

[aranajhonny]

In pages/index.js

Change

<Link href="/projects?name=foo" as="/projects/foo">
<Link href="/projects?name=bar" as="/projects/bar">

To

<Link href="/project?name=foo" as="/project/foo">
<Link href="/project?name=bar" as="/project/bar">

and server.js

server.get("/projects/:name", (req, res) => { return app.render(req, res, "/project", { name: req.params.name }); });

to

server.get("/project/:name", (req, res) => { return app.render(req, res, "/project", { name: req.params.name }); });

Because in pages it is calledproject.js

[aranajhonny]

@joaocrq I've been working here let me know if it works

[crqra]

@aranajhonny Thank you very much for your quick reply!

I thought that if I declared routes with express it wouldn't matter the filename in pages/, because it was being specified in render method:

app.render(req, res, --> "/project" <--, { name: req.params.name })

as the method signature suggests:

export async function render (req, res, --> pathname <--, query, opts) {

in https://github.com/zeit/next.js/blob/master/server/render.js

Or have I misunderstood the meaning of that pathname (or other concept)?

Thanks for your help!

[timneutkens]

@joaocrq the only thing that has to be changed in this case is this:

<Link href="/project?name=foo" as="/projects/foo">

In this case:

• /project is the filename in pages
• ?name=foo is the query parameter
• as is the path in sync with your custom server.

To answer your question about pathname, in Next.js we don't have a way to know /projects/foo is actually /project?name=foo on the server. This is the reason you have to provide it manually. There are some people in the community that made wrappers for this though. Have a look at: https://github.com/fridays/next-routes