question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom routes and 404 on client side getServerSideProps access

See original GitHub issue

Bug report

Describe the bug

I’m using custom routes to make translated paths (/hello, /hola, /ni-hao) for my server-side rendered pages (/hi/[lang].js). I then link to them like this:

<Link href="/hi/[lang]?lang=zh" as="/ni-hao">...</Link>

Unexpectedly though, a click on that link tries to load the data from getServerSideProps by requesting _next/data/.../ni-hao.json instead of _next/data/.../hi/[lang].json

To Reproduce

Repo: https://github.com/davidknezic/now-nextjs-issues/tree/now-nextjs-rewrites Live: https://now-nextjs-issues-git-now-nextjs-rewrites.davidknezic.vercel.app

next.config.js

module.exports = {
  target: 'serverless',
  experimental: {
    async rewrites () {
      return [
        { source: '/hello', destination: '/hi/en' },
        { source: '/hola', destination: '/hi/es' },
        { source: '/ni-hao', destination: '/hi/zh' }
      ]
    }
  }
}

pages/index.js

<Link href="/hi/[lang]?lang=zh" as="/ni-hao">
  <a>ni hao</a>
</Link>

pages/hi/[lang].js

export default function Index () {
  return (
    <h1>hi</h1>
  )
}

export async function getServerSideProps () {
  return {
    props: {}
  }
}

Expected behavior

I’d expect Next.js to fetch server side data based on the links href instead of the as param.

System information

  • OS: any
  • Browser: any
  • Version of Next.js: 9.3.1

Additional context

I host all of this with Now, which currently doesn’t seem to understand Next.js rewrites, both in dev and productively. Is it planned to introduce this?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
davidkneziccommented, Mar 21, 2020

I was able to make it work by changing this._getServerData(as) to this._getServerData(pathname) in my local next.js repo:

https://github.com/zeit/next.js/blob/cadc950e2d2eea969ddabf135e9223b2c21108d6/packages/next/next-server/lib/router/router.ts#L618-L624

this._getStaticData(as) also uses the as param. However, there it might be on purpose.

0reactions
balazsorban44commented, Jan 29, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next.js, redirect to 404 page inside getServerSideProps
I am looking for a best practice in a server-side rendered page on handling an HTTP 404 if the requested page does not...
Read more >
Data Fetching: getServerSideProps - Next.js
When exporting a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data ...
Read more >
Advanced Features: Error Handling - Next.js
Error Handling. This documentation explains how you can handle development, server-side, and client-side errors. Handling Errors in Development.
Read more >
Dynamic Routes Details - Next.js
If you want to access the Next.js router, you can do so by importing the useRouter hook from next/router . 404 Pages. To...
Read more >
Shallow Routing - Next.js
Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps , getStaticProps , and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found