Instantly set up Next.js blog with TypeScript or JavaScript
- JavaScript Blog: Set up a blog with JavaScript in seconds
- TypeScript Blog: Set up a blog with TypeScript in seconds
- Tailwind CSS: Supports Tailwind CSS out of the box for TypeScript ATM
- Unopinionated: No opinionated styling or UI. You can build your own UI on top of it
- Category: Create different post category with category individual pages. Read more here
- Post: Create a new blog post by creating a new markdown file in the
postsdirectory - Route: Automatically create routes for your blog posts based on the markdown file name
- SEO: Use your blog post frontmatter to add SEO tags to your blog post
- Markdown components: Use React components in your markdown blog posts
- MIT License: Free to use for personal and commercial projects
# use it with npx (recommended)
npx create-nextjs-blog@latest
# install the CLI globally
npm i -g create-nextjs-blog@latest
# npx: create a new Next.js blog
npx create-nextjs-blog@latest
# npx create a next Next.js blog with TypeScript
npx create-nextjs-blog@latest --typescript
# npx create a next Next.js blog with Tailwind CSS & TypeScript
npx create-nextjs-blog@latest --withTailwind
# npx create a next Next.js blog with JavaScript
npx create-nextjs-blog@latest --javascript
# global: create a new Next.js blog
cnb
# global: create a next Next.js blog with TypeScript
cnb --typescript
# global: create a next Next.js blog with Tailwind CSS & TypeScript
cnb --withTailwind
# global: create a next Next.js blog with JavaScript
cnb --javascriptOnce the blog is set up, run the Next.js app and navigate to
http://localhost:3000/blogto see your blog. I highly recommend using Vercel to deploy your blog.
- Create a new markdown file in the
postsdirectory. For example, if you want to create a new blog post namedmy-first-blog-post, create a new file namedmy-first-blog-post.md. - Add the frontmatter to the markdown file. The frontmatter is the metadata of your blog post. It contains the title, description, tags (SEO keywords), category, publish date, modified date, cover image of your blog post. Here is an example of the frontmatter.
---
title: Hello World
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor'
tag:
- example
- demo
category:
- test
publishedDate: 2022-12-28T16:27:05.876Z
lastModifiedDate: 2022-12-28T16:27:05.876Z
cover: ''
---- Add the content of your blog post to the markdown file. You can use React components in your markdown file. Click here if you want to learn how to inject React components in your blog. The following is an example of a markdown blog post that uses a React component.
## Paragraph
Lorem ipsum dolor sit amet, *consectetur* adipiscing elit, sed do eiusmod tempor **incididunt** ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea ***commodo*** consequat.
<Note>
This is a sample note
</Note>- If you want to locally look at the blog post in your browser, run the following command once in your terminal.
npm run generate-data- Now navigate to
http://localhost:3000/blog/my-first-blog-postto see your blog post. - Once you are done, push the markdown file to your GitHub repository. Your blog post will be automatically deployed to your blog site.
You only need to run the command in step #4 once. You don't have to run it again after updating the file.
Add a new category
To add a new category, go to the data/categories.json file and create an object with your category. For example, if you want to add a life category, add an object with a single name key inside they JSON array.
[
{
"name": "life"
}
]Use category in your blog file
To use this newly created life category in your blog file, just add it as a value to the category in your markdown file frontmatter. For example, if you want to add a life category to your blog post, here is how you can do it.
---
title: 'My first blog post'
description: 'This is my first blog post'
category:
- life
---Category page
- Your blog site has a category page. To access this page, navigate to
http://localhost:3000/blog/categoryto see all the different blog categories you have. - To access a specific category page, navigate to
http://localhost:3000/blog/category/guideto see all the blog posts with theguidecategory. - You can also click on the category name in the blog post card at
http://localhost:3000/blogto navigate to the category page. - Here is the live demo of the category page. Click on any category, all the posts in that category will be displayed. If you want to see all the posts, navigate to
https://create-nextjs-blog.vercel.app/blog.
Create a component
The CLI uses next-mdx-remote to render markdown files. You can create your own components and use them in your markdown files. To create a component, create a new file in the components/markdown directory. For example, if you want to create a Note component, create a new file in the components/markdown directory named Note.js or Note.tsx depending on the type of blog you created.
const Note = ({ children }) => {
return (
<p
style={{
backgroundColor: '#fad',
borderRadius: '10px',
boxShadow: '0 0 5px #fad',
padding: '10px',
margin: '0 20px'
}}
>
<em>{children}</em>
</p>
);
};
export default Note;Add the component in the components/markdown/index.js or index.tsx file
import dynamic from 'next/dynamic';
const Note = dynamic(() => import('./Note'), { ssr: false });
const MarkdownComponents = () => {
return {
// h1: (props: any) => <h1 {...props} />,
Note: props => <Note {...props} />
};
};
export default MarkdownComponents;Use this component in your markdown blog files
<Note>You can use this component in your markdown files.</Note>Live demo
You can see a live demo of this component here. You can find its source code here.
Make sure you read the contributing guidelines before opening a PR.
I have curated a detailed list of all the open-source projects I have authored. Do take out a moment and take a look.
- MIT © Saad Irfan
- Code of Conduct