Build a NextJS Blog with MDX and Tailwind.
Hello programmers,
Do you want start your blog where you educate others, or may be you want a blog as a repository of all the information you’ve gathered over the years. Anyway, blogs can be a great source of information providers for others as well as yourself. It can really help you connect deep with the content you want to consume. Setting up a blog is easy, especially if you’re a programmer. You can create your own blog with Next.JS and MDX. In this article, I will show you exactly how to do that!
What are we going to build?
By the end of this article, we will have a blog site for ourselves, which is going to look like this. You can off course make it look more beautiful, but for the sake of tutorial, I made it look very simple.
Introduction
What do we need?
- A decent knowledge of Next.JS framework
- Dependencies -
- Tailwind CSS
Let’s Start!
Create a next project
First of al, we’ll start by creating a next project
Install all the necessary dependencies.
| fs | Provides a way to work with files |
|---|---|
| path | Provides a way to work with directories and paths. |
| gray-matter | Parses the front-matter from a string or file |
| next-mdx-remote | To render your mdx content on the page |
Setting up Tailwind
Run the following commands, in your terminal to install tailwind.
Run this command to create a tailwind.config.js file
Inside the tailwind.config.js, paste the following
Include these in your styles/globals.css file
Homepage
In index.js file, create an async function getStaticProps(). getStaticProps() is used in data fetching and returning the result as a prop to the same component. Next.JS will render this page at build time.
Inside getStaticProps we will use the fs and path module to read the .mdx stored inside the /pages/posts directory.
We will then filter the result to only get the MDX files and not the [slug.js] file that we will create ahead.
We will then map through each file using the .map array function and then read each individual file using the fs and path module and extract the front matter of the file using the matter() function (imported from gray-matter) and store the front matter along with slug of every file in the posts variable.
variable will look somethings like this -
At last, we will map through each post (inside the props) and render it in the UI. We will also use the component from next to create a link to each post.
The final index.js file will look like this
PostCard Component
Create a component components/PostCard.js. We will use this component to return card for each post.
Post page
Create a /pages/posts/[slug].js page to render each post separately on a different route.
We will use the getStaticPaths async function to generate separate routes according to the slug for each post at the build time.
We will the getStaticProps once again to read files and extract front matter as well as the content from it using the gray-matter module. The content of the mdx files need to be serailized in order to render it using the next-mdx-remote module.
We wil then render the mdx source recieved inside the props.
Styling Post page
We will also add some basic styling for the post page using tailwind directives. Create a styles/Post.module.css file and include these styles for a better look.
Bonus - Syntax Highlighting! 🎉
If you want to see, how to add syntax highlighting for your code elements in the mdx files, you can checkout my full video tutorial I did on my YouTube channel
{% youtube c4ge3tgGZuw %}
Connect with me
Twitter - shaancodes Github - shaan-alam YouTube - shaancodes Instgram - shaancodes