Source code release of My Next.js MDX blog template!

I've finally released the source code my MDX blog at andersmadsen.dev. You can get the code here. I've stripped it of my content, so it's ready for yours 🙂.

Features

• Static server generation (SSG) of every blog page is achieved by using Next.js. This means that no HTML is generated when you open a blog page, as it is stored in its compiled HTML ensuring very fast load times.
• MDX parsing configured and styled for code. By implementing Code Hike any code that you display in your blog post will be sufficiently highlighted.
• Search is implemented for titles. By using fuse.js a user will be able to search any blog post title on your website. This can easily be expanded to also include keywords and such.
• Light/dark theme switch. The user's default theme will be chosen to begin with whereafter the user is free to change it by clicking the switch.
• General stuff such as canonical link support, sitemap generation, copyright and Medium/LinkedIn links.

Blog post workflow

The workflow for the blog is very simple. Any blog post that you save in either the blog or guides folder, will end up on your site, ordered by date. The frontpage will show the latest two posts for each type of article.

If you want to write a post, you can branch out from main. Once you are done writing it, you can merge back to the main branch. When an update hits the main branch, your chosen hosting provider, if configured, will update your website accordingly. I strongly recommend using Vercel for this.

This makes the workflow incredibly simple. That said, Be careful that you don't push anything to main that isn't ready for production.

Possible improvements

The app can be improved in many ways. These are some examples:

• Hiding posts. To circumvent having to branch out from main when creating a new post.
• Indexing search on startup. Instead of search being indexed when it is used for the first time, have it be on startup.
• Tests. Add some meaningful tests to check the behavior of the app.

Related posts

I've talked about the process of building the app in these posts:

1. How I built my own blog from scratch (Using Next.js, MDX and Vercel)
2. How I use Material 3 to kickstart my frontend projects (with Figma and Next.js)
3. How to dynamically build a search index for a Next.js blog based on MDX files (Next.js)

Conclusion

You can use my code for inspiration or for the basis of your blog. I hope you were able to learn something.

I write mainly about web development, so follow me for more articles in this vein. I'd love to learn about your website styling and development process, feel free to share it. Also, if you have any questions, feel free to reach out in the comments 🙂.