First MDX page and understanding static rendering
We have reached yet another milestone, now that we did set up MDX support for Next.js 15, 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
text in *italic*
text in **bold**
text in ***bold and italic***
> a quote
[link to Next.js](https://nextjs.org)
* foo
* bar
* baz
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 added MDX support to your Next.js project and learned how to create MDX pages
Next.js route groups
By adding parenthesis (()) around the tutorial_examples folder name we have created our first route group, the page in /app/(tutorial_examples)/first_mdx_page/page.mdx will be at the http://localhost:3000/first_mdx_page URL, as you can see tutorial_examples did NOT become a segment of the URL, that is because folders which use parenthesis (in their name) are called route groups
The purpose of route groups 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 we made sure that our page can get generated at build time
There are two ways to verify if our pages are static:
The first option to check if a page is fully static, is a new feature that got added to Next.js 15. If your page is static then a round toast (badge) will appear at the bottom right of your page and if you hover it, it says "Static route"
The second option to check if a page is fully static, is to make a local build:
npm run buildAfter the build is done, you will see that Next.js has printed the following info in our 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 contentThe 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 what Next.js calls a Dynamic API, 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