next-routes icon indicating copy to clipboard operation
next-routes copied to clipboard

Bug with getServerSideProps

Open eliasjnior opened this issue 4 years ago • 2 comments

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 avatar May 18 '20 20:05 eliasjnior

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.

eliasjnior avatar May 18 '20 22:05 eliasjnior

+1

jeremymarc avatar Jul 14 '20 20:07 jeremymarc