1

我有一个使用 Prismic API 作为内容源的使用 SSR 创建下一个应用程序的应用程序。我正在尝试创建动态路线并遇到一堵砖墙。单例路线很好，但尝试动态创建路线我似乎无法弄清楚。

我等待接收道具的组件

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

我的 Prismic Link Resolver，但不确定这是否相关

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 '/';
}
4

1 回答 1

1

根据您使用 Create Next App 的事实做出一些假设，我认为一个可能的原因是您没有将查询传递给组件，因为您正在next为您的开发环境使用该命令，该命令不支持直接带有自定义路由的导航。如果我是对的，使用 Next 的<Link>组件创建一些指向这些页面的链接，您应该能够导航到客户端生成的页面。

Zeit 详细介绍的官方建议及其分步教程详细说明了您需要设置 node Express 应用程序来处理自定义路由，或在now.json配置文件中设置路由信息。这将传递查询信息，以便它们可以在getInitialProps.

基本上，为了快速开始，您将把dev命令替换package.json为 Nodejs 而不是 Nextjs。我还应该提到now dev 已经宣布它应该提供一个开发环境，而不需要额外的节点服务器应用程序。

于 2019-05-09T14:17:25.833 回答