How and why I built Blogs with Nextjs and MDX
About me
I am fullstack js developer who has big love in solving challenges. My favorite stacks are nodejs, react.
The problem I wanted to solve
Next.js is great and I want to write something so I came to find a solution for publishing my blogs with next.js. There are thousands blog ready engines out there but I chose Next.js feat with markdown since md is quite easy to use.
So the advantages are obviously that blogs are simple, flexible to integrate with
react components and fast by default since it does not need any db under the hood.
However there are several limitations with this way like markdown itself has limitation to add attributes, css so you will need plugins to handle that. Images are also a problem. To add images to a blog then you will need to upload some where and add the links to blogs.
This blog is originally from my personal site, https://hittaducmai.se/blogs/blogging-with-nextjs
What is Blogs with Nextjs and MDX?
Blogs are written in markdown and published on a nextjs site. The blogs are equipped with webcomponents
Tech stack
- Nextjs
- MDX
- Webcomponents
- Deploy to now.sh
The process of building Blogs with Nextjs and MDX
Next.js has a neat integration with MDX, you can read more about that here https://mdxjs.com/getting-started/next.
Basically add @next/mdx @mdx-js/loader
npm install --save @next/mdx @mdx-js/loader
next.config.js
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'md', 'mdx']
})
Add a layout for blog. My favorite setup is to add BlogLayout under components folder. In the layout you can specify common things for blogs like css, common logic
Add your first blog md file, eg blog.md under pages. Nextjs and MDX loader will automatically make md files available as other pages.
In blog.md add the following code then your blog will utilize the above layout
import Layout from '../components/BlogLayout'
export default Layout
there will be several things you might want to add to your blogs. For example:
styles for blogs, I suggest to use styled components and add your styles in the layout.
class or attributes for elements, I suggest to use the following plugins "remark-attr", "remark-custom-blocks"
custom components like accordion I suggest to use webcomponents. I implemented here https://etfeurope.net/education/etf-basics/all-you-need-to-know-about-european-etfs
Challenges I faced
as I already mentioned in the begining, it is very smooth and easy to write blogs using md format and it is more powerful with mdx which can be empowered by React however the problems here are:
- how to manage images. I chose to upload to a free blog on wordpress.com
- how to have components like accordion, outline automatically. I solved by using webcomponents.
Final thoughts and next steps
This solution is fit to some sites which want to add blog function as additional function and wants to integrate to some functions which already exists in the sites.
