1 Вопрос: Как получать и отображать динамические URL-адреса с помощью Prismic и Server Rendering

вопрос создан в Wed, May 8, 2019 12:00 AM

У меня есть приложение, использующее Create Next App с SSR, использующее API Prismic в качестве источника контента. Я пытаюсь создать динамические маршруты и врезаться в кирпичную стену. Одиночные маршруты были хороши, но пытаясь динамически создавать маршруты, я не могу понять это.

Мой компонент, где я жду, чтобы получить реквизит

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

My 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 '/';
}
    
1
1 ответ                              1                         

Исходя из того, что вы используете Create Next App, я думаю, что вероятной причиной является то, что вы не передаете запрос компоненту, потому что вы используете команду next для среды разработки, которая выиграла не поддерживает прямую навигацию с пользовательской маршрутизацией. Если я прав, создавая некоторые ссылки на эти страницы с помощью компонента Next <Link>, вы сможете переходить к созданным страницам на стороне клиента.

Официальные рекомендации, подробно изложенные Zeit и их пошаговое руководство подробно о том, что вам нужно либо настроить приложение Express узла для обработки пользовательской маршрутизации, либо настроить информацию о маршрутизации в файле конфигурации now.json. Это передаст информацию запроса, чтобы ее можно было использовать в getInitialProps.

Для быстрого начала работы вы замените команду dev в package.json на Nodejs вместо Nextjs. Следует также упомянуть, что было объявлено о now dev , который должен обеспечить среду разработки без необходимости приложение сервера дополнительного узла.

    
1
2019-05-09 14: 17: 25Z
  1. СПАСИБО! Это решило это. Я пробовал собственный сервер, но не исправил свой скрипт npm.
    2019-05-09 16: 26: 00Z
источник размещен Вот