# Dynamic pages and nested children

**URL:** <https://community.prismic.io/t/dynamic-pages-and-nested-children/6402>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [July 26, 2021, 3:10pm UTC](https://community.prismic.io/t/dynamic-pages-and-nested-children/6402 "2021-07-26T15:10:24Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![amos](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@amos](https://community.prismic.io/u/amos)\
**Post date:** [July 29, 2021, 11:45am UTC](https://community.prismic.io/t/dynamic-pages-and-nested-children/6402/6 "2021-07-29T11:45:07Z")

</div>

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:

```auto
// 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

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

```

I then have this in my Prismic configuration:

```auto
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:

```auto
// /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,
      },
    };
  },
});

```

```auto
// /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!

---

_[View the full topic](https://community.prismic.io/t/dynamic-pages-and-nested-children/6402)._