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.

Using basePath breaks SPA when using getServerSideProps or getStaticProps

See original GitHub issue

Bug report

Describe the bug

Setting basePath breaks SPA fetches and causes full re-render.

To Reproduce

  1. Set basePath to project in next.config.js
  2. Add either getServerSideProps or getStaticProps and getStaticPaths method to a page.

Repo for testing: https://github.com/IikkaWinter/next-basepath-demo

Deployments with basePath: https://nextjs-blog-d3av2acke.vercel.app/docs/foo

without basePath (everything works): https://nextjs-blog-2o56gnpjr.vercel.app/foo

Everything works as expected when run locally with vc dev. Deploy to Vercel and every _next/data//.json path returns 404.

Expected behavior

Expected to run serverside method and return 200.

Screenshots

OBS! Prerendered page1.json and page2.json work. Screenshot 2020-10-22 at 14 56 22

foo.json missing. Also see how Lambda function is named instead of /foo. Screenshot 2020-10-22 at 14 59 54

System information

  • OS: macOS
  • Browser (if applies) Chrome
  • Version of Next.js: 9.5.5
  • Version of Node.js: 12.13.0

Additional context

Additionally, when using basePath (/docs) with rewrites and parameters in sources, e.g. /:locale/:path, the route/docs/en will pass the following parameters to the getServerSideProps:

{
  locale: 'doc',
  path: 'en'
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
ijjkcommented, Nov 7, 2020

Hi, this should be corrected now, please re-deploy your applications and give it a try!

1reaction
joiglifbergcommented, Nov 9, 2020

Confirmed fixed!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next.js: The Good, Bad and Ugly - An Idiosyncratic Blog
This method is used when we want to pre-render a page on each request using the data returned by getServerSideProps . Unlike getStaticProps...
Read more >
getStaticProps vs getServerSideProps for Next JS - OhMyCrawl
Pages built using getServerSideProps for SSR won't be as fast as SSG, however, it is optimal when compared to utilizing a standard SPA...
Read more >
Client-Side Routing In Next.js - Smashing Magazine
Next.js has a file-based routing system in which each page automatically becomes a route based on its file name. This article will guide...
Read more >
Next.js Redirect from / to another page - Stack Overflow
At the time of writing (Next 9.4), you have to use getInitialProps , not getServerSideProps , otherwise you lose the ability to do...
Read more >
Data Fetching: getServerSideProps - Next.js
getServerSideProps with Edge API Routes ... getServerSideProps can be used with both Serverless and Edge Runtimes, and you can set props in both....
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