How to Create a Next.js Markdown Blog Using react-markdown
Low-code tools like WordPress simplify the blog creation process. You can use a pre-made theme and start writing blog posts in a matter of hours. If you want more control over your code and have some time on your hands, it’s better to build your blog from scratch. You can even use a framework like Next.js to simplify the process.
Sign up forfree
Forgot your password?
Create an account
*Required: 8 chars, 1 capital letter, 1 number
By continuing, you agree to thePrivacy PolicyandTerms of Use.You also agree to receive our newsletters, you can opt-out any time.
Creating a Next.js Project
Next.js is a React framework that simplifies how you build applications. It provides many tools and configurations out of the box, allowing you to start writing code immediately after installing it.
The simplest way to get started with Next.js is by running the create-next-app command in a terminal:
This command creates a Next.js project containing all the necessary files to start.
First things first, clean up theindex.jsfile to look like this:
Create Markdown Blog Posts
The blog will rendermarkdown filesstored locally in the project folder. So, create a new folder at the root calledcontentto store the files. In this folder, create a new file calledcreate-active-link-nextjs.mdand add the following:
The name of the markdown file will be part of the post URL, so verify it’s a good one. Also, note the contents between the dashes. This is the metadata of the post and is called the front matter.
Parsing Markdown Files
For each blog post, you must parse the markdown content and the front matter. For Markdown, use react-markdown and for the front matter data, use gray-matter.
React-markdown is a React component built on remark that safely converts markdown into HTML. The gray-matter library parses front matter and converts YAML into an object.
Execute the following command in the terminal to install react-markdown and gray-matter.
In a new folder called utils, create a new file called md.js. You will create helper functions that return blog post content in this file.
Get All Published Posts
In md.js, add the following code to return all the posts in the content folder.
In the getAllPosts() function:
To get only the published posts, you can filter all the posts and only return those whose isPublished key in the front matter is set to true.
In md.js, add the getSinglePost() function to retrieve the contents of a single post.
This function calls the getFileContent() function to get the contents of each file. Then using the gray-matter package, the function retrieves the front matter and the markdown content.
Display All the Blog Posts
Next.js provides different rendering options, one of them being static generation. Static generation is a type of pre-rendering where Next.js generates all the HTML pages during build time. You use it to create fast static pages.
Check out theofficial Nextjs documentationfor more information on rendering.
Next.js will pre-render a page at build time using the props returned by the getStaticProps function. In this case, the props will be an array of published posts.
Modify the index.js file to display a list of blog posts.
The Home component uses the posts returned by getStaticProps. It iterates over them using the map function, and for each post, it displays a title, a link to the full post, and a description.
Display a Blog Post
As mentioned, the posts' filenames will be used as URL paths. These paths are also dynamic, so you need to generate them during build time. Next.js allows you to do this using the getStaticPaths() function.
For example, in this code, the paths are generated from the names of the markdown files.
Note you are using the posts data returned by the getAllPublished() helper function you created before.
You are also setting fallback to false, which returns a404 errorfor paths that don’t exist.
getStaticPaths() is usually used with getStaticProps() which retrieves the contents of each post based on the params.
To render the markdown to HTML, use react-markdown.
This component will render the contents of each blog post and its corresponding URL.
If creating a developer blog, you canadd syntax highlightingcapability for each component.
Styling the Next.js Markdown Blog
So far, you have created a Next.js markdown blog that displays a list of blog posts and renders the contents of that post. To make the blog look nicer, you should add CSS styles.
Next.js has good CSS support, and you can choose to use CSS-in-JS libraries like styled components. If you prefer to separate CSS from JS, you can use CSS modules.
Styled components can increase the modularity of your apps and their building blocks, but do the benefits outweigh the drawbacks?
My iPhone does it all, but I still need my dumb phone.
OneDrive is one of the best, but it has a catch.
The key is not to spook your friends with over-the-top shenanigans.
My foolproof plan is to use Windows 10 until 2030, with the latest security updates.
Revolutionize your driving experience with these game-changing CarPlay additions.
