Adding routes for a second repeatable type /blog not working

Developing with Prismic
1

I have a NEXTjs site using slices (and slice-machine) and I have two types of repeatable type. One is page and the other is article the pages/[uid].jsx is at the root level within the pages folder while the article [uid].jsx is located at pages/blog/[uid].jsx

in prismic-configuration.ts I have the following config:


import Prismic from "@prismicio/client";
import smConfig from "./sm.json";

if (!smConfig.apiEndpoint) {
  console.warn("Looks like Slice Machine hasn't been bootstraped already.\nCheck the `Getting Started` section of the README file :)");
}

export const {apiEndpoint} = smConfig;

export const Router = {
  routes: [
    {
      type: "page",
      path: "/:uid"
    },
    {
      type: "article",
      path: "/blog/:uid"
    },
    {
      type:"home-page",
      path:"/"
    },
  ],
  href: (type) => {
    const route = Router.routes.find((r) => r.type === type);
    return route // && route.path; // route && route.href;
  }
};

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

And, in prismicHelpers.js I have the following config

// ~/utils/prismicHelpers.js
import Prismic from '@prismicio/client'
import Link from 'next/link'
import {
    apiEndpoint,
    accessToken,
    Router
} from '../prismic-configuration'

// -- Link resolution rules
// Manages the url links to internal Prismic documents
export const linkResolver = (doc) => {
  if (doc.type === "page") {
      return `/${doc.uid}`;
  }
  if (doc.type === "article") {
      return `/blog/${doc.uid}`;
  }
  return "/";
};

// Helper function to convert Prismic Rich Text links to Next/Link components
export const customLink = (type, element, content, children, index) => (
  <Link
    key={index}
    href={linkResolver(element.data)}
    as={linkResolver(element.data)}
  >
    <a>{content}</a>
  </Link>
);

// Options to be passed to the Client
const createClientOptions = (req = null, prismicAccessToken = null, routes = null) => {
    const reqOption = req ? { req } : {}
    const accessTokenOption = prismicAccessToken ? { accessToken: prismicAccessToken } : {}
    const routesOption = routes ? { routes: Router.routes } : {}
    return {
        ...reqOption,
        ...accessTokenOption,
        ...routesOption,
    }
}

// -- @prismicio/client initialisation
// Initialises the Prismic Client that's used for querying the API and passes it any query options.
export const Client = (req = null) => (
  Prismic.client(apiEndpoint, createClientOptions(req, accessToken, Router))
);

export default Client

The contents of my [uid].js is basic

import { Client } from "../../prismic-configuration";
import { useGetStaticProps, useGetStaticPaths } from "next-slicezone/hooks";
import Layout from "../../components/Layout";
import { 
  Box
} from "@chakra-ui/react"

const Page = (props) => {
  return (  
    <Layout menu={props.menu}>
      <Box p={10}><mark>{props.uid}</mark></Box>
    </Layout>
  )
};


export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: (prismicDocument) => ({
      params: {
        uid: prismicDocument.uid
      }
    })
});

export const getStaticProps = useGetStaticProps({
  client: Client(),
  apiParams({ params }) {
    return {
      uid: params.uid
    }
  }
});

export default Page;

The issue is that my blog pages of type article do not work. It gets a 404 error and if I disable all routes in Router the type repeatable type page still work, same for homepage. It seems like no specific setting that I put in Router seems to work.
What am I doing wrong ?

Thank you.

PS. I followed this guide when setting up the project Next.js and Prismic - Prismic

2

Hey Marius,

So the project is most likely using the link resolver here to build your routes, that's why disabling the Route Resolver is having no effect.

The issue here is that you still need to update the getStaticPaths function to include the new path. So something like for

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: (prismicDocument) => ({
      params: {
        uid: `/blog/${prismicDocument.uid}`
      }
    })
});

I'm not 100% this is correct though, let me know if it works and I'll test it on my side at the same time.

Saying that though, we are deprecating the next-slicezone soon so I would recommend doing your query with the Client like we do here in the blog example:

Let me know if you have any questions.

Thanks.

4

Thank you Phill, I've done as you suggested but it still doesn't work. The blog articles links do not contain the /blog path in their slug either. (I have them linked using relational content feature in prismic CMS on a separate page) At this point I think to do the queries with the new client as per your example, but the project is almost done and I'm afraid I may break other thinks.

6

Hey, @nedzen.11 could you share with us your new project configuration?

If you're using Phil's example, the path should work, as he mentioned above, you needed to add the /blog/${prismicDocument.uid} to getStaticPaths of your article document. After that, the router will create a /blog/uid URL for you.

7

Moving to client v5 shouldn't cause any problems for your project.