Next.js Discord

Discord Forum

Display MDX without the page.tsx middleman?

Unanswered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
Reading the mdx docs for the app directory (https://nextjs.org/docs/app/building-your-application/configuring/mdx) it says that I can create the mdx content, but that I need a basic page.tsx to display it. I'm looking into creating a documentation system that will use custom components, but pages themselves will be driven by mdx. I don't want 100 useless page.tsx files all over the place. Is there anyway to use the mdx file itself as the "page" file?

The older pages model allowed this https://nextjs.org/docs/pages/building-your-application/configuring/mdx

3 Replies

Alligator mississippiensisOP
nvm I guess nextra will work well for my needs
Golden-winged Warbler
Here are three different approaches to having a directory of MDX content. I went this way because it wasn't clear if Nextra supports the /app router... and learning.

https://github.com/hofstadter-io/supacode/tree/main/templates/src/mdx
Golden-winged Warbler
1. (page) the page.tsx spam method offers the best support
2. (dir) dynamic import
3. (remote) fs read (or database fetch?)

2 or 3 hit a bug in next / mdx with nested componentes, anything that use client side code but does not declare 'use client'