Menu Close

A starter template designed to get up and running with a Next.js-powered blog

A starter template designed to get up and running with a Next.js-powered blog

MIT License
LinkedIn

Welcome to Your Next.js + MDX Blog Starter!

This starter template is designed to get you up and running with a Next.js-powered blog that uses MDX for content. You can use this as a starting point for your own blog or as a reference for how to use Next.js and MDX together.

Product Preview

Product Preview

Getting Started

To get started, clone the repository and install the dependencies:

git clone https://github.com/eric-ricky/nextjs-mdx-blog-starter.git
cd nextjs-mdx-blog-starter

npm install
or
yarn

Once the dependencies are installed, you can start the development server by running:

npm run dev
or
yarn dev

This will start the development server at http://localhost:3000. You can view and edit the source code in the /pages and /components directories.

Writing Blog Posts

Blog posts go in the /posts directory. To create a new blog post, create a new file in this directory using the .mdx file extension. The file name will be used as the URL for the blog post, so choose a descriptive and meaningful name.

In the front matter of the blog post, you can set various metadata such as the title, author, and date:

---
title: My First Blog Post
tags:
  - nextjs
  - reactjs
date: 2022-12-30
excerpt: Some excerpt
image: '/image-location'
---

After the front matter, you can write the body of the blog post using MDX syntax. MDX is a format that allows you to write both Markdown and JSX in the same file, so you can include React components in your blog posts.

Customizing the Template

You can customize the look and feel of the blog by editing the components in the /components directory. The main layout of the blog is in /components/layout, and the styles are in /components/styles/global.css. You can also add your own React components and use them in your blog posts.

Deploying Your Blog

To deploy your blog, you can use a service like Vercel. Vercel makes it easy to deploy Next.js apps with automatic builds and deployments.

Once you have an account, you can connect your GitHub repository and set up automatic deployments. You can also set up a custom domain if you have one.

That’s it! You now have a Next.js + MDX blog up and running. Happy blogging!

Demo

Contact

Website – website

Linked In – Eric Otieno

(back to top)

View Source Code
Posted in Next.js, React