This is a minimal Next.js & Contentlayer starter that comes configured with MDX support, code highlighting, and tailwind css.

Demo

Clone this repository and install all dependencies

git clone https://github.com/achintyajha/contentlayer-next-mdx-starter/ my-blog
npm i

That's it! To create new posts, head over to the content/blog folder and create new MDX files. The name of the file is used for generating the slug while the frontmatter is used for adding the date, title, and description.

To use your own components in your MDX files, import them to the pages/blog/[slug].tsx page, and add them to the MDXcomponents variable. To give custom name aliases to these components use the following syntax -

// pages/blog/[slug].tsx
import Image from "next/image"

const MDXcomponents = {
  // Pass Custom Components here (for use in markdown files)
  img: Image,
};

See more in the Contentlayer docs

To create other page types, define them in the contentlayer.config.ts file, just like the Post type has been defined. Create a corresponding index and slug page for the type in pages directory.