I'm trying to achieve a dynamic routing structure that allows for a bit more freedom in the routing. Essentially, I have a page type called landing
, that I'm able to route to within my [uid]
template, using { uid } = params
in my getServerSideProps
function. However, I want to allow users to visit that same page via a subdirectory, such as mysite.com/sacramento-ca/landing-page
. The research that I've done seems to indicate that I can create a content relationship within my repository that references a document that can be the top level ( sacramento-ca
being the example here), and then reference those in my query, and pass that to the page template. However, I can't figure out how to make that happen.
My pages
directory is structured like this:
├── [uid]
│ └── index.tsx
├── index.tsx
├── products
│ └── [uid].tsx
├── projects
│ └── index.tsx
├── promos
│ ├── [id].tsx
│ └── index.tsx
└── sitemap
└── index.tsx
..and overall this works just fine for top level pages. But 1. how can I query the category
in getServerSideProps
and how would I name and nest the page templates? I read this question/answer on Stack Overflow as well, and that seems like it's on the right track, but I'm not sure how to make it happen. Here is the code for my [uid]
template as well, in case that's helpful.
import React from 'react';
import { SEO } from 'components/seo/SEO';
import { SliceZone } from 'components/slice-zone/SliceZone';
import { client, queryWithProducts } from '../../lib/prismic';
export const Page = ({ document }: any) => {
const slices = document;
if (!slices) return null;
const { meta_title, meta_description, meta_keywords, social_image } = document;
return (
<>
<SEO
title={meta_title}
description={meta_description}
keywords={meta_keywords}
banner={social_image.url}
/>
<SliceZone slices={slices} />
</>
);
};
export default Page;
export const getServerSideProps = async ({ params, query }: any) => {
console.log(query)
const { uid } = params;
const { data: document } = await client.getByUID('landing', uid, queryWithProducts);
return {
props: {
document,
},
};
};