Nextjs + Nextra
How to create a markdown blog with nextjs and nextra?
You create a nextra-based markdown blog without writing a single line of code.
Now day nextjs has gained lots of popularity in the javascript world. You can create anything with nextjs. But there is one problem if you make a simple portfolio blog with nextjs.
It would not help if you had a written lot of code for a simple blog. The solution is a nextra. Nextra is a robust framework based on nextjs, and it uses markdown. Nextra framework is specially built to create markdown-based documentation and portfolio blogs without coding.
Nextra framework provides two themes one is for blogs, and the second is for documentation. In this article, we create a simple blog with nextra without writing a single line of code in nextjs. You can focus on writing rather than coding. Nextra frameworks like SEO, Sitemap, and comments handle everything.
All the codes are available on GitHub, and check out the live blog demo.
Requirements
- You have basic knowledge of react and nextjs.
- You read nextra docs or watch youtube based nextra tutorials before reading the blog.
Youtube Tutorial
How to create a setup for nextra?
To create a new project for nextra, the nextra community provides a cli tool for you and needs to run the following cli command.
# create a new blog setup with preconfiguration
pnpm create-nextra-app --blog
# or
# create a new docs setup with preconfiguration
pnpm create-nextra-app
Following command output
For this article, we create a blog with nextra cli. If you are interested in a portfolio blog, this article is for you.
Folder structure
Your default folder structure looks like, the index.mdx file bind yourdomain.is/and your pages/posts folder refer to yourdomain.is/posts
- the
script/gen-rss.jscreate an RSS file for your app. - the
theme.config.jsis contain configuration for your theme. - the
style/main.cssis write your custom CSS or add tailwind directives inmain.cssfile.
Learn about nextra blog theme configuration
You can change related to the blog theme in theme.config.js file. You can change or config the comment, footer, navs, postFooter, readMore, and dark mode with the help of theme.config.js file.
- navs option help to add additional navigation item in the navbar. Specifically, I add the GitHub and RSS feed in my demo with the navs option.
- The footer option help to create a custom footer for your blog.
- postFooter option help to create a footer for the post-reading page. In my demo, I used postFooter to add a newsletter to my blog.
- darkMode option help enables or disable dark mode on your blog.
- readMore option helps change the text of the read more button.
- The comments option allows adding a custom comment system for your blog. In my blog, I added a giscus base open source comment system.
Type in the blog theme
There are two most common types of blog themes. The first is the page, and the second is the poststype.
Page type
Page type automatically adds a link in the navbar. It is used when you create a page for your blog, for example about page, a contact page, a privacy policy page, and so on.
---
title: Contact us
type: page
---You can create a new page with the following frontmatter schema.
---
title: Contact us
description: Contact us
date: 2022-11-08T08:57:51.118Z
author: Rajdeep Singh
type: page
---Posts type
Posts type is used when you create a new article or post on a blog.
---
title: Random blog Title for markdown.
type: posts
---You can create new blog posts inside the posts/random-blog-title-for-markdown.mdx folder using the following frontmatter schema.
---
date: 2022-03-20T13:09:24Z
description: Dolor excepteur ad ad fugiat Lorem consectetur velit excepteur duis qui.
image: /images/dice.jpg
tag: npm ,npm cli ,npm install command
title: Random blog Title for markdown.
author: Rajdeep Singh
type: posts
---Home page
You can edit or change the home page in pages/index.mdx file. It is used as the main file.
---
type: page
title: Home
description: Home page for demo website -- Rajdeep Singh.
tags:
- Blog
- About
- Rajdeep Singh
image: /images/about-us.png
author: Rajdeep Singh
---
## Hi welcome back,
I completed my study in master of science in biotechnology last year. After passing out 12 classes, I brought MY first android mobile phone. Then I started using mobile, and I found a video on youtube about how to earn online money. that video changed my life. During my B.sc, I successfully found my first job on the internet. I got selected for a front-end developer role on just theme. My part is to convert png design into HTML and CSS.
After one year, I changed my job. In my second job, I learn many things like reactjs, API, CMS, etc.
I started my writing career as a technical writer during my job. I published my first book on Linux and a research paper with osf. Some later, I publish one more book on bioinformatics.
Now I publish an article every week on medium and other publications. You can read my article on my medium profile.
Thank for reading
Rajdeep SinghPosts page
In the posts folder, I create a pages/posts/index.mdx file and define type:posts . Now all the posts made in pages/posts/ folder treat as posts by nextra.
---
type: posts
title: Posts
---
# Blog Posts
Read our latest blog posts.Directly you access all posts by hitten the localhost:3000/posts routes in your blog.
FAQ
How to create an RSS feed?
You can create an RSS file running the node scripts/gen-rss.js script in your project. It will create a feed.xml file in the public folder.
Your feed RSS looks like https://frontendweb3.github.io/nextra-blog/feed.xml.
Problems with the nextra blog theme.
There are two significant problems with the nextra blog theme.
- You can't create dynamic SEO.
- Nextra blog theme doesn't provide search functionality for a blog. It would be best if you had the search functionality config yourself.
- Nextra does not provide any documentation for the blog theme.
Nextra is worth it for learning?
Yes, nextra is worth it; you do not need to configure the MDX and other stuff for your documentation and portfolio blog.
If you publish a blog irregularly or create a blog website for showoff. Secondly, you create robust documentation for the product. Then nextra framework is a good choice for you.
How to create a custom nextra theme?
Currently, the nextra team needs to provide documentation for that. If you have a pro developer experience in reactjs, you can easily modify the old theme or create a new theme from scratch.
Conclusion
Nextra is an excellent framework for creating docs and personal blogs. If you know about react.js, you can edit or change the nextra blog theme according to your requirements. It is beneficial for you.
Nextra is very good at creating documentation. nextra documentation theme provides all modern features for documentation, and you do not need any changes in the core theme.
You do not need to write any single line of code to create documentation. You focus on writing.
You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontend web, and Sign up for a free newsletter.
