Duc Mai

Full stack developer


Use nextjs and md for blogging

Use nextjs and md for blogging

Nextjs is a becoming more and more popular react framework. In this blog we will use nextjs as blogging platform.

Blogging with nextjs

This is the first blog I wrote using md format. Well it is quite simple and developer friendly. After this blog I might want to integrate a comment module like disqus


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.

How to implement

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


    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

About me

How I describe about myself

A developer cares about climate changes and environments

A full stack js developer

A developer is interested in cloud technologies

A challenge lover


English, Swedish, Vietnamese

Duc Mai
Duke Mai
Duc Mai