Dynamic routing - Users can make own pages/objects/routing
Unanswered
Chub mackerel posted this in #help-forum
Chub mackerelOP
Hi!
Within our product, users could creates pages like:
/about-us
/another-page
and are able to create objects, for instance: blogs. And create entities within blogs which will then be handled as single posts. Routing would then look like:
/blogs
/blogs/single-post
To achieve this I have setup the following structure within the App dir:
[rootSlug]/page.tsx
[rootSlug]/[slug]/page.tsx
Now my quesitons:
1. How would I pass the rootslug as a param in the
2. Right now it does not show me a 404 if I go to random urls like:
Within our product, users could creates pages like:
/about-us
/another-page
and are able to create objects, for instance: blogs. And create entities within blogs which will then be handled as single posts. Routing would then look like:
/blogs
/blogs/single-post
To achieve this I have setup the following structure within the App dir:
app/
├── [rootSlug]/
│ ├── page.tsx # Renders root page for /rootSlug
│ ├── [slug]/
│ │ ├── page.tsx # Renders child page for /rootSlug/slug
│ ├── layout.tsx
└── layout.tsx
[rootSlug]/page.tsx
export const dynamicParams = false;
export async function generateStaticParams() {
const response = await fetchAllPageSlugs();
const rootSlugs = Object.keys(response);
return rootSlugs.map((slug) => ({
rootSlug: slug,
}));
}
[rootSlug]/[slug]/page.tsx
export const dynamicParams = true;
export async function generateStaticParams() {
}
Now my quesitons:
1. How would I pass the rootslug as a param in the
generateStaticParams
function for the single page? Based on that rootslug I do want to generate the staticparams2. Right now it does not show me a 404 if I go to random urls like:
rootslug/a
It does work when I remove the second param from the url, so all the problems are coming from how I have setup the [slug] folder within the [rootslug].