1

I have an app using Create Next App with SSR using the Prismic API as a content source. I am trying to create dynamic routes and running into a brick wall. Singleton routes were fine but trying to dynamically create routes I can't seem to figure it out.

My Component where I wait to recieve props

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

My query where I attempt to get my page data based off the 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, but not sure this is relevant

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 '/';
}
geeberry
  • 617
  • 2
  • 10
  • 17

1 Answers1

1

Making some assumptions from the fact that you're using Create Next App, I think a probable cause is that you're not passing the query to the component because you're using the next command for your development environment, which won't support direct navigation with custom routing. If I'm right, creating some links to those pages using Next's <Link> component you should be able to navigate to your generated pages on the client side.

The official recommendations detailed by Zeit and their step-by-step tutorial detail that you need to either set up a node Express app to handle the custom routing, or setting up the routing information in a now.json configuration file. This will pass the query information so they can be used in getInitialProps.

Basically, to get started quickly you will replace the dev command in package.json to be Nodejs instead of Nextjs. I should also mention that now dev has been announced which should provide a development environment without the need for an extra node server app.

Raul Gonzalez
  • 26
  • 3