Next.js: Using basePath breaks SPA when using getServerSideProps or getStaticProps

[IikkaWinter]

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.

foo.json missing. Also see how Lambda function is named instead of /foo.

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'
}

[tiagooliveira08]

I have the same problem.

[IikkaWinter]

Tested also on v10.0.0, same issue persists. It's is really causing a lot of issues atm for us. Any estimate when you might be able to take a look at this?

P.S. Thanks for a nice next.conf!

[joiglifberg]

+1

[IikkaWinter]

For anyone looking for a quick fix for now, here's a component you can add to _app.js that will intercept all /_next/data/[BUILD]/[path].json calls and prepend basePath:

import { useEffect } from 'react';
import { fetchIntercept } from 'req-interceptor';

const basePath = '/docs'; // REPLACE WITH YOUR BASE PATH
const dataPathMatch = new RegExp(/(^\/_next\/data\/.*\/.*\.json.*)/);

const prependBasePath = url => url.replace(dataPathMatch, `${basePath}$1`);

const RequestInterceptor = () => {
  useEffect(() => {
    const unregister = fetchIntercept.register({
      request: function (url, config) {
        // Intercept data .json calls to add proper basepath
        url = prependBasePath(url);

        return [url, config];
      }
    });

    // Unregister your interceptors
    return unregister;
  }, []);
  return null;
};

export default RequestInterceptor;

[ijjk]

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

[tiagooliveira08]

god!

[joiglifberg]

Confirmed fixed!