Next.js Markdown Blog (App Router)

A Next.js markdown blog static site built with the App Router and MDX

Note: To see a Live Demo, check out the Next.js Markdown Blog (Pages Router) version and open the Live Demo link

Screenshot

How to use

Installation

• clone the repo and cd into it, then run:

npm install

Development

• run the development server:

npm run dev

How to create new posts

• create a new folder inside app/(blog)/ with the name of your post

• create a new page.mdx file inside the folder

• add the Markdown content of your post in the page.mdx file

TIP: MDX supports JSX, so you can also import and use React components in your MDX files

Test Static Site Generation

• Make sure to add output: 'export', to the next.config.mjs file

const nextConfig = {
  output: 'export',
}

• run the build command:

npm run build

• run the static site:

npx serve@latest out

Resources

• Next.js
• Next.js MDX
• MDX
• Static Web Page Wiki