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