npx create-next-app@latest

npm install contentlayer next-contentlayer

|--app
   |--global.css
   |--layout.css
   |--page.tsx
   |--blog
      |--page.tsx
|--assets
   |--moonlight-ii.json
|--posts
   |--post-1.mdx
   |--post-2.mdx
|--tailwind.config.js
|--package.json
|--next.config.js
|--contentlayer.config.js

import { defineDocumentType, makeSource } from "contentlayer/source-files";
import remarkGfm from "remark-gfm";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
export const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      description: "The title of the post",
      required: true,
    },
    description: {
      type: "string",
    },
    date: {
      type: "date",
      description: "The date of the post",
      required: true,
    },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (post) => `/posts/${post._raw.flattenedPath}`,
    },
  },
}));
 
export default makeSource({
  contentDirPath: "posts",
  documentTypes: [Post],
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [
        // options,
        rehypePrettyCode,
        {
          theme: "github-dark",
          onVisitLine(node) {
            // Prevent lines from collapsing in `display: grid` mode, and allow empty
            // lines to be copy/pasted
            if (node.children.length === 0) {
              node.children = [{ type: "text", value: " " }];
            }
          },
          onVisitHighlightedLine(node) {
            node.properties.className.push("line--highlighted");
          },
          onVisitHighlightedWord(node) {
            node.properties.className = ["word--highlighted"];
          },
        },
      ],
      [
        rehypeAutolinkHeadings,
        {
          properties: {
            className: ["anchor"],
          },
        },
      ],
    ],
  },
});

npm run build

import { allPosts } from ".contentlayer/generated";
import { getMDXComponent } from "next-contentlayer/hooks";
 
const getPost = async () => {
  const post = allPosts[0];
  return post;
};
 
const mdxComponents = {
  // h2: ({ props }: any) => (
  //   <h2 className="prose text-3xl" apply="mdx.h2" {...props} />
  // ),
};
 
export const Post = async ({ params }: any) => {
  const post = allPosts[0];
 
  const MDXContent = getMDXComponent(post.body.code);
 
  return (
    <div className="dark:text-white dark:bg-slate-800 min-h-screen">
      <div className="max-w-4xl mx-auto px-10 prose-h2:text-lg prose dark:prose-invert">
        <MDXContent components={mdxComponents}></MDXContent>
      </div>
    </div>
  );
};
 
export default Post;