Low-code tools like WordPress simplify the blog creation process.
you could even use a framework like Next.js to simplify the process.
Learn how to build a simple Next.js blog that renders markdown posts.
Creating a Next.js Project
Next.js is a React framework that simplifies how you build applications.
So, create a new folder at the root calledcontentto store the files.
Also, note the contents between the dashes.
This is the metadata of the post and is called 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.
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 punch in 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.
Display a Blog Post
As mentioned, the posts' filenames will be used as URL paths.
These paths are also dynamic, so you’re gonna wanna 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.
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.
To make the blog look nicer, you should add CSS styles.
If you prefer to separate CSS from JS, you’re free to use CSS modules.
