[BUG] Custom route name does not take effect with `refine-nextjs-router`

Describe the bug Custom route name does not take effect with refine-nextjs-router.

To Reproduce

1. Register resource with custom route

{
  name: "foo",
  options: {
    route: "/custom/foo",
  }
}

1. Create dynamic nextjs pages

pages/custom/[resource]
pages/custom/[resource]/index.tsx
...

1. Request /custom/foo, the server return 404

Expected behavior The server should return resource page as expected.

Additional context Look at the following codes https://github.com/pankod/refine/blob/69b36225c3d097dfe5f9d915cc81c47a49280a9b/packages/nextjs-router/src/nextRouteComponent.tsx#L36 Nextjs router find resource by comparing resource name and resource.route, but resource.route is changeable.

The following codes worked for me

const resource = resources.find((res) => res.name === routeResourceName); 

Or

const resource = resources.find((res) => res.name === routeResourceName || res.route === routeResourceName); 

[wy-z]

I have now created version 2.6.3. It will be published in ~15 minutes!

By the way, I have an idea for Layout re-render issue. I’ll open a new issue and tag you!

Truly grateful for your kindness. Good luck and great success in the New Year.

[wy-z]

Hey @wy-z , Thanks for the bug report.

Yes, your solution is nice but when I use something other than resource name as customRoute this solution doesn’t work.

Example;

{
   name: "foo",
   options: {
     route: "/custom/bar",
   }
}

Any ideas on how we can handle this?

Hi @omeraplak , thank you for your support. See https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

Next.js dynamic routes can be extended to catch all paths by adding three dots (...) inside the brackets. 

For example:

1. Create dynamic nextjs page

pages/[...resource].tsx

1. Request /custom/bar, the resource param will be ['custom', 'bar']

So, one possible way is

1. if the type of resource is string, compare with resource.name and resource.route
2. if the type of resource is array, splice the strings together (['custom', 'bar']-> '/custom/bar'), and compare with resource.route