Dynamic pages and nested children

Developing with Prismic
6

Hi @Priyanka,

It's not necessarily the file structure that is the problem for me. It's mainly how I should set up the "City Page" custom type, the router in my Prismic configuration and how I should then query this in the Next.js page. I already did the following and it's sort of working, but I don't think it's the correct way of doing things:

// City Page custom type
"city" : {
  "type" : "Link",
  "config" : {
    "select" : "document",
    "customtypes" : [ "city" ],
    "label" : "City",
    "placeholder" : "city"
  }
},
"uid" : {
  "type" : "UID",
  "config" : {
    "label" : "UID",
    "placeholder" : "unique-identifier-eg-apartments"
  }
},

and the following file structure

/cities
  /[city]
    index.tsx —>url:/cities/[city]
    /[uid]
      index.tsx —> url:/cities/[city]/[uid]

I then have this in my Prismic configuration:

export const linkResolver = (doc) => {
  if (doc.type === "page") {
    return `/${doc.uid}`;
  }
  return "/";
};

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

which is probably wrong, as I have to do the following to make it work:

// /cities/[city]/index.tsx
export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: "city-page",
  apiParams({ params }: any) {
    return {
      uid: params.city,
    };
  },
});

// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: "city-page",
  formatPath: (prismicDocument: any) => {
    return {
      params: {
        city: prismicDocument.uid,
      },
    };
  },
});

// /cities/[city]/[uid].tsx
export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: "city-page",
  apiParams({ params }: any) {
    return {
      uid: params.uid,
    };
  },
});

// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: "city-page",
  formatPath: (prismicDocument: any) => {
    if (!prismicDocument.data.city.slug) {
      return {
        params: {
          uid: prismicDocument.uid,
          city: prismicDocument.uid,
        },
      };
    }

    return {
      params: {
        uid: prismicDocument.uid,
        city: prismicDocument.data.city.slug,
      },
    };
  },
});

So for e.g. /cities/new-york I will create a City Page with just the uid field set to new-york, and for e.g. /cities/new-york/apartments I would create another page with the city field set to the City custom type New York and the uid set to apartments.

I am obviously missing something or doing it wrong, as the double return above does not make sense and I am only doing it because I get the following error if I don't: A required parameter (city) was not provided as a string in getStaticPaths for /cities/[city]/[uid]. If you could help me out with this, it would be very much appreciated!