How to use dynamic routes? e.g. [title].md

[YousefED]

Hi!

Does Nextra support dynamic routes such as [title].md for pages? I noticed that I can put a markdown file there, but obviously it doesn't show up in the sidebar etc. What's the recommended approach for adding dynamic pages to Nextra?

Vitepress has an equivalent feature called "dynamic routes": https://vitepress.dev/guide/routing#dynamic-routes. Does Nextra support something similar?

Thanks,

[YousefED]

I browsed the source code (

nextra/packages/nextra-theme-blog/src/tags.tsx

Line 23 in 22b9bb4

export const getStaticPaths: GetStaticPaths = () => {

), and seems like it's undocumented, but basically I can do this:

Hello sdfsdf

export const getStaticPaths = () => {
  return {
    paths: [{ params: { slug: "a" } }, { params: { slug: "b" } }],
    fallback: false,
  };
};

export const getStaticProps = ({ params }) => {
  return {
    props: {
      ssg: {
        slug: params?.slug,
      },
    },
  };
};

but this doesn't add "a" or "b" to the sidebar yet, right?

[YousefED]

Thanks for quick reply. I'm using the Docs theme :) (migrating blocknotejs.org from vitepress)

What I'm trying to achieve:

• I have some README.md files somewhere in the repo / filesystem (but not part of the nextra directories). For example demo-1/README.md
• for certain paths (e.g.: /examples/demo-1 and /examples/demo-2), I want to have a page that shows the content from the corresponding readme, but also some additional info (like an iframe embed). So it wouldn't correspond to exactly the readme. Therefore, I would like to use a template file [example].md.

My alternative would be to use a script to generate all md/mdx files, but that would be less ideal of course. The scenario is pretty close to what's described at https://vitepress.dev/guide/routing#dynamic-routes

[dimaMachina]

I have some README.md files somewhere in the repo / filesystem (but not part of the nextra directories). For example demo-1/README.md

symlink your file/folder for this case in the corresponding route in pages folder

for certain paths (e.g.: /examples/demo-1 and /examples/demo-2)

If you want to render MDX content programmatically - use compileMdx from nextra/compile in getStaticProps function in your md/mdx file
If you want to have the dynamic route [slug].mdx - same as above + use of getStaticPaths
I'll suggest trying Nextra 3 alpha

[YousefED]

Clear. I don't think symlinking will work in my scenario (because I want to add some additional content to the pages).

So getStaticProps and getStaticPaths should work if I understand correctly? This is the solution I tried, but it doesn't generate the sidebar. I suppose that's fixed in Nextra 3 and a bug in Nextra 2?

[dimaMachina]

I don't think symlinking will work in my scenario (because I want to add some additional content to the pages).

yeah, if you want to modify content - use getStaticProps to compile your MDX at build time

but it doesn't generate the sidebar.

does it generate a sidebar when you access the dynamic route? here is working example with generated sidebar https://github.com/shuding/nextra/tree/v3/examples/swr-site/pages/en/remote/graphql-eslint from blogpost

[YousefED]

The example you linked to is also designed for V3 right? I didn't get it working on V2. Would love to migrate to V3, but the lack of documentation for all these kind of ("hidden") features is scaring me off a bit now. I think I'll make V2 work with a manual script that just generates mdx files, and migrate to V3 as soon as the docs are there.