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
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 managable 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 buildAfter 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 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 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 making a donation ❤️ as it will help me create more content and keep it free for everyone