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!