Reactjs 如何使用Prismic和服务器端渲染接收和映射动态URL

我有一个应用程序使用创建下一个应用程序与SSR使用Prismic API作为内容源。我试图创建动态路线，并撞到砖墙上。单例路由很好，但试图动态创建路由，我似乎无法理解

我等待接收道具的组件

class AboutPage extends React.Component {
  static async getInitialProps(context) {
    const { slug } = context.query;
    const response = await getAboutPage(slug);
    return {
      doc: response,
      slices: response.results[0].data.body,
      data: response.results[0].data,
    };
  }

我尝试从UID中获取页面数据的查询：

const getAboutPage = slug => {
  try {
    const API = Prismic.api(PRISMIC_API_URL);
    const response = API.query([
      Prismic.Predicates.at('document.tags', [SOURCE]),
      Prismic.Predicates.at('my.about_page.uid', slug),
    ]);
    return response;
  } catch (error) {
    return error;
  }
};

我的棱镜链接解析器，但不确定这是否相关

function linkResolver(doc) {
  if (doc.type === 'home_page') return `/`;
  if (doc.type === 'pricing_page') return `/pricing`;
  if (doc.type === 'service_page') return `/services/${doc.uid}`;
  if (doc.type === 'about_page') return `/${doc.uid}`;
  if (doc.type === 'resource_page') return `/resources/${doc.uid}`;
  return '/';
}

---

根据您正在使用Create Next App这一事实做出一些假设，我认为可能的原因是您没有将查询传递给组件，因为您正在为您的开发环境使用

Next

命令，该命令不支持带有自定义路由的直接导航。 如果我是对的，使用Next的

组件创建一些指向这些页面的链接，您应该能够在客户端导航到生成的页面

您需要设置node Express应用程序来处理自定义路由，或者在

now.json

配置文件中设置路由信息。这将传递查询信息，以便在

getInitialProps

中使用

---

基本上，为了快速入门，您将把

package.json

中的

dev

命令替换为Nodejs，而不是Nextjs。我还应该提到

now dev

，它应该提供一个开发环境，而不需要额外的节点服务器应用程序。

谢谢！这就解决了问题。我尝试了一个自定义服务器，但没有更正我的npm脚本。