2020-01-04
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
Motivation
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
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