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

Question

我有一个使用 Create Next App with 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;
  }
};

我的 Prismic Link 解析器，但不确定是否相关

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

Answer 1

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

官方 recommendations detailed by Zeit and their step-by-step tutorial 详细说明您需要设置节点 Express 应用程序来处理自定义路由，或者在 now.json 配置文件中设置路由信息。这将传递查询信息，以便它们可以在 getInitialProps.

中使用

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

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

How to receive and map dynamic URLS using Prismic and Server Side Rendering

reactjs

server-side-rendering

next.js

prismic.io