fridays / next-routes

Universal dynamic routes for Next.js
MIT License
2.47k stars 230 forks source link

Bug with getServerSideProps #336

Closed eliasjnior closed 1 year ago

eliasjnior commented 4 years ago

I found a bug with this package. I have a page pages/Dashboard and added a custom route:

routes.add('dashboard', '/painel', 'Dashboard')

In my component I export the getServerSideProps with empty props. But when I navigate between pages, in the pages I setup getServerSideProps calls http://localhost:3000/_next/data/development/painel.json.

The painel.json doesn't exists because actually the page is dashboard.json in Next.js.

I'm trying to find a way to rewrite the call to dashboard.json or redirect it in Express side, but no success yet.

eliasjnior commented 4 years ago

Well, my temporary fix is the following:

On my server.ts:

import customRoutes from './routes'

//...

server.get(/(\/_next\/data\/\w+)([\w/]+)(\.json|\.js)/, function (
  req: Request,
  res: Response,
  next: NextFunction,
) {
  const { '0': start, '1': page, '2': ext } = req.params
  for (const route of customRoutes) {
    const regexp = pathToRegexp(route.pattern)
    if (page.match(regexp)) {
     return res.redirect(`${start}/${route.page}${ext}`)
    }
  }
next()
})

This should come first of everything after starting the Express server to intercept all JSON and JS calls. It will match the environment and the custom path you setup.

My routes will look like this:

export const customRoutes = [
  {
    name: 'custom-path',
    pattern: '/any/custom/path',
    page: 'YourPage',
  },
]

Basically Next will call http://localhost:3000/_next/data/development/any/custom/path.json that will be 404, but the middleware will redirect to http://localhost:3000/_next/data/development/YourPage.json, that will return the correct data.

jeremymarc commented 4 years ago

+1