Как получать и отображать динамические URL-адреса с помощью Prismic и Server Rendering - PullRequest
Новая
       48

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

1 голос
/ 08 мая 2019

У меня есть приложение, использующее Create Next App с 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;
  }
};

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 голос
/ 09 мая 2019

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

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

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

...