The Route Resolver [next.js]

Developing with Prismic
1

Hello,

I am currently developping a website under next Js, and with time it started taking a little bit more complexity.

At the moment we have a page structure that looks like this

pages/[uid].js

But in an effort to organize everything, we decided to move forward with nested routes; I am using a SliceZone for the components, but currently I have a Link Resolver, I feed the link object

that looks like this

{
"id": "YGH1sBAAACEAGGjF",
"type": "page",
"tags": [
    "Products"
],
"slug": "product-slug",
"lang": "de-de",
"uid": "product-slug",
"link_type": "Document",
"isBroken": false
}

My link resolver would check the type and the lang, and resolve accordingly the proper route.
The link resolver looks like this

  linkResolver(doc) {
    console.log({ doc });
    if (doc.type === 'page') {
      return `/${doc.lang}/${doc.uid}`;
    }
    if (doc.type === 'homepage') {
      return `/${doc.lang}`;
    }
    if (doc.type === 'services') {
      return `/${doc.lang}/services/${doc.uid}`;
    }
    return '/';
  },

But the problem now is that I defined a Relational Link on my pages, that link to a category in order to create a route in a form of

pages/[category]/[uid].js

Fetching and filtering the pages wasn't a problem. The routing now is, as I have a Link Resolver routing, there is no way for me to know what is the category relation with a certain page.

I have checked Define Paths with Next.js - Prismic

I have already have in my template a Router in my prismic.js
But I feel this is only for nuxt js as I don't see it being called anywhere and it doesn't feel like next js code.

export const Router = {
  routes: [
    { type: 'page', path: '/:uid' },
  ],

  href: (type) => {
    const route = Router.routes.find((r) => r.type === type);
    return route && route.href;
  },
};
3

Hi David,

I'm investigating the issue; in the meantime, can you please share your repository name (in a private message if necessary) to check if SM is activated for your repo,

Note you need to have the SM feature activated for the repository to able to use the Route Resolver.

Looking forward to your reply,
Fares

4

Hi,

Thanks for your answer.

I am already using slices on the prismic repo, so I would guess that SM is activated on the prismic repository.

I've shared details with you through private message,

Best,

5

Note: this issue has been resolved in a private message the @DavidParys was "importing the wrong Client resolver" it would be great @DavidParys if you can share your resolution here.

6

If your project is already using prismic but not slice machine, it's important to check your client.

I was using Prismic Predicates before slice machine and had a client snippet already generated which looked liked this

export const Client = (req = null) =>
  Prismic.client(apiEndpoint, createClientOptions(req, accessToken));

const createClientOptions = (req = null, prismicAccessToken = null) => {
  const reqOption = req ? { req } : {};
  const accessTokenOption = prismicAccessToken
    ? { accessToken: prismicAccessToken }
    : {};
  return {
    ...reqOption,
    ...accessTokenOption,
  };

But should look like this with Slice machine

export const Router = {
  routes: [
    {
      type: 'page',
      path: '/:lang/:category?/:uid',
      resolvers: {
        category: 'product_category',
      },
    },
  ],

  href: (type) => {
    const route = Router.routes.find((r) => r.type === type);
    return route && route.href;
  },
};

export const Client = (req = null, options = {}) =>
  Prismic.client(apiEndpoint, { routes: Router.routes, ...options });

Thanks to @Fares for helping out :+1:

1 Like