First MDX page and understanding static rendering

We have reached yet another milestone, now that we did set up MDX support for Next.js, it is now time to create our very first MDX page, and after that, we will see how to know if pages got statically generated (or not)

Our first MDX page

In the app folder, create a new (tutorial_examples) folder (note that the name is in parenthesis (()), this is important, more about this in the next chapter) and then in it another first_mdx_page folder (this time no parenthesis)

Then, inside of the first_mdx_page folder, add a page.mdx (note that we set extension to mdx and NOT tsx), and then paste the following content into it:

# Hello 👋 with MDX!
 
## headline 2nd level
 
*italic*
 
**bold**
 
***bold and italic***
 
> a quote
 
[link to Next.js](https://nextjs.org)
 
* foo
* bar
* baz
 
![This is an octocat image](https://myoctocat.com/assets/images/base-octocat.svg 'I\'m the title of the octocat image')
 

Make sure your dev server is running, if it is not, start it using npm run dev

Then visit your newly created MDX page in the browser at http://localhost:3000/first_mdx_page

Congratulations 🎉 you just added MDX support to your Next.js project and learned how to create MDX pages

Next.js route groups

We just created our first route group by adding parenthesis (()) around the tutorial_examples folder name

The page in /app/(tutorial_examples)/first_mdx_page/page.mdx will produce the following URL http://localhost:3000/first_mdx_page, as you can see tutorial_examples did NOT become a segment of the URL, that is because folders which use parenthesis are called route groups and their purpose is to allow us to better organize our files without impacting the structure of the URL

By putting files into different folders the amount of files per folder can become more manageable without impacting the resulting URL

Static rendering

Putting our content into the first MDX page instead of fetching it from a database means we just used Static Rendering for our first page with MDX support

To check if a page is fully static, you can do a (local) build using the npm run build command:

npm run build

After the build is done, look at the output in your terminal:

Route (app)                              Size     First Load JS
┌ ○ /                                    307 B           187 kB
├ ○ /_not-found                          1.02 kB         188 kB
└ ○ /first_mdx_page                      307 B           187 kB
 
○  (Static)  prerendered as static content

The empty circle (○) in front of our /first_mdx_page indicates that Next.js will statically generate routes (pages) at build time instead of on-demand at request time

Because Next.js will automatically choose the server rendering strategy for each route based on the features you use, your page at some point might not be static anymore, for example when you use a dynamic function like searchParams or when you fetch data and do NOT use generateStaticParams then your page becomes dynamic, which is why it is recommended to launch the build locally from time to time and check if the pages you want to be static still are, if they are not static anymore you might want to find the cause and for example use generateStaticParams to make it fully static again.

If all of your pages are static, you can do a static export, meaning npm run build will produce an out folder and put all the HTML/CSS/JS static assets into it, then you can take that folder and for example deploy your app on GitHub pages or use a CDN to deliver your static content.

Another feature you might be interested in is called assetPrefix, the assetPrefix is a next.config.mjs configuration option that is useful when the images are NOT stored on the same domain (sub-domain) as the content itself, for example if your static project is at www.example.com but the images are at cdn.example.com.

Congratulations 🎉 you now know how to check if pages are static or dynamic, which is essential because the more static content you have, the less work the server will need to do during runtime, and this will result in pages that load blazingly fast

If you liked this post, please consider buying me a coffee ☕ or sponsor ❤️ me on GitHub, as it will help me create more content and keep it free for everyone