I'm building a guides section where each guide contains a bunch of mdx chapters. So to render the chapter in its page.tsx, I need to read both the ${guideSlug} and the ${chapterSlug} in the same page.

When I try this with the following code, I get a route that looks like this: guides/guides/listen-please.mdx. So the ${guideSlug} doesn't update.

I'm using a helper to load the chapters:

import fs from 'fs/promises'
import matter from 'gray-matter'

export async function loadChapter(slug: string) {
  const chapterContent = await fs.readFile(`guides/${slug}.mdx`)
  const { data: frontmatter, content } = matter(chapterContent)

  return { frontmatter, content }
}

And within the page.tsx in the [chapterSlug] this is the code:

import { loadChapter } from '@/app/helpers/loadChapter'
import { MDXRemote } from 'next-mdx-remote/rsc'

async function Chapter({ params }) {
  console.log(params)
  const { frontmatter, content } = await loadChapter(`${params.guideSlug}/${params.chapterSlug}`)
  return <MDXRemote source={content} />
}