NextJS使用带有getServerSideProps子路径的getServerSideProps

Question

我在NextJS部署到特定的URL路径 (和将NextJS应用程序部署到不同的基本路径(即非根路径))已经在我们的项目上使用了一年的解决方案。我们的next.js服务器托管在另一个站点的子路径下，但是子路径来自另一个服务器，而不是我们的服务器。也就是说我们在http://example.com/project/path。但是我们的服务器在http://localhost:8081/上运行，所以我们不能使用basePath，因为这改变了我们的本地路径。这件事一直很成功。我们为我们的链接使用一个包装的next/link，并且在大多数情况下只是在我们自己的basePath到API调用之前添加。

最近我尝试使用getServerSideProps()而不是getInitialProps()，因为我是在线阅读的，这是新的首选方法(一个API调用，而不是我们之前进行的多次调用)。我遇到的问题是，我找不到一种方法来告诉next.js，它需要将basePath添加到它发出的getServerSideProps API调用中。我们使用assetPrefix将图像和css指向子路径，但是看起来有一个bug https://github.com/vercel/next.js/issues/15563修复了，它允许我们使用assetPrefix而不是basePath。

同样，我们不能使用basePath，因为它将本地主机更改为http://localhost/project/path，并且是外部网站有额外的操作。还有别的解决办法吗？或者我们只是停留在getIntialProps上，因为它起作用了，希望我们将来不会失去这个选项？

目前，服务器端呈现工作正常，但当我导航客户端时，它在getServerSideProps API调用和浏览器上返回一个404，而不是重定向和加载页面服务器端，比如：铬网络负载。虽然它“工作”，但它并不是很好的表现，因为它必须服务器端呈现每个页面。

编辑:建议的解决方案https://stackoverflow.com/a/66642225/1870780无法工作，因为我们不能使用basePath，因为它改变了本地服务器基础，而不是指向服务器的远程服务器路径。

Answer 1

谢谢@juliomalves为我指明了解决方案的方向。https://github.com/vercel/next.js/discussions/25681#discussioncomment-2026813的讨论有一个可行的解决方案。为了节省别人的时间，我们在这里加入了解决方案，但是解决方案要归功于阿利泽依。我的解决方案和his之间的主要区别是，他的namespace不包括领先的/，而我的则包括。

打字本解决方案：

import { AppProps } from "next/app";
import { Router } from "next/router";
import { useEffect } from "react";

const useInterceptNextDataHref = ({
  router,
  namespace
}: {
  router: Router;
  namespace: string;
}) => {
  useEffect(() => {
    if (router.pageLoader?.getDataHref) {
      const originalGetDataHref = router.pageLoader.getDataHref;
      router.pageLoader.getDataHref = function (args: {
        href: string;
        asPath: string;
        ssg?: boolean;
        rsc?: boolean;
        locale?: string | false;
      }) {
        const r = originalGetDataHref.call(router.pageLoader, args);
        return r && r.startsWith("/_next/data")
          ? `${namespace}${r}`
          : r;
      };
    }
  }, [router, namespace]);
};

export default function MyApp ({ Component, pageProps, router }: AppProps) {
  useInterceptNextDataHref({
    router,
    namespace: "/my-base-path"
  });
  return <Component {...pageProps} />;
}