Dynamic routes with Pages Router
Unanswered
Pacific anchoveta posted this in #help-forum
Pacific anchovetaOP
Hi.
I find the docs a but confusing. I'm trying to refactor an app from the "app router" approach to the old "pages router".
I have a page called "Lessons" with links to each individual "Lesson". So I need an
Should I do this:
or
I tried the first approach, and then my whole dev server crashed (see screenshot). Now, whatever I do, It still crashes.
I find the docs a but confusing. I'm trying to refactor an app from the "app router" approach to the old "pages router".
I have a page called "Lessons" with links to each individual "Lesson". So I need an
index.tsx to show all the lessons, and a dynamic page for each lesson. Should I do this:
pages/lessons/index.tsx + pages/lessons/[slug].tsxor
pages/lessons/index.tsx + pages/lessons/lesson/[slug].tsx ?I tried the first approach, and then my whole dev server crashed (see screenshot). Now, whatever I do, It still crashes.
6 Replies
Giant panda
Dynamic routes in the pages router follow the second convention. If deleting the cached
.next folder before starting the dev server doesn't fix your issue then it's likely you have errors in your code.Pacific anchovetaOP
Thanks I'll try that
Pacific anchovetaOP
@Giant panda , that worked well - thanks.
Now, however, I have another problem. You see, with the app router, I had this folder structure:
The setup looked like this:
Now, in the page router's
My current route structure can be seen in the screenshot.
Now, however, I have another problem. You see, with the app router, I had this folder structure:
app/lessons/[lessonId]/[sessionId]/page.tsx, and at that page I had access to the params from the [lessonId] as well as the params from [sessionId] in the generateStaticParams function. That way I could fetch data for a specific Lesson by its Id, then map out all it's sessions and genereate paths from these slugs. The setup looked like this:
export async function generateStaticParams({
params: { lessonId },
}: {
params: { lessonId: string };
}) {
const { sessions } = await getLessonBySlug(lessonId);
return sessions.map((session) => ({
sessionId: session._key,
}));
}
async function getLesson(id: string) {
const res = await getLessonBySlug(id);
return res;
}
export default async function Session({
params: { lessonId, sessionId },
}: {
params: { lessonId: string; sessionId: string };
}) { // rest of the codeNow, in the page router's
getStaticPaths it seems I don't have access to the params from the parent route. Is that correct? At least I can't find any docs on it. If that is the case, do you (or anyone else) know how to solve this?My current route structure can be seen in the screenshot.
Giant panda
Your current folder structure does not have any path that is mapped to what was
app/lessons/[lessonId]/[sessionId]/page.tsx in the app routerFor that path in particular you'd need a file at
pages/lessons/[lessonId]/[sessionId].tsx and the gSP function would need to return both params lessonId and sessionId for which the page exists.Pacific anchovetaOP
Ok, I see. I moved the
Also, I still don't know how/if I can get the route params to use in my
[lessonId].tsx to it's own folder, since i thought I could not have a pages/lessons/index.tsx and a pages/lessons/[slug].tsx in the same folder. Also, I still don't know how/if I can get the route params to use in my
getStaticPaths somehow? I can't generate the paths for the sessions, unless I got the specific lessonId from the parent route...