با پوشه برنامه Next.js 13 و Contentlayer یک برنامه وبلاگ بسازید

npx create-next-app@latest --ts

npm i contentlayer next-contentlayer @opentelemetry/api

const { withContentlayer } = require('next-contentlayer')

module.exports = withContentlayer({
  experimental: { appDir: true },
})

import { defineDocumentType, makeSource } from "contentlayer/source-files";


const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      description: "The title of the post",
      required: true,
    },
    description: {
      type: "string",
      description: "The description of the post",
      required: true,
    },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
    },
  },
}));

export default makeSource({
  contentDirPath: "posts",
  documentTypes: [Post],
});

---
title: "How to create Next.js app"
description: "Learn how to create Next.js app"
---

# Install Next.js

### Fist you need to install Next.js with the following command:

npm i create-next-app@latest

npm run dev

import { allPosts } from "contentlayer/generated";
import { getMDXComponent } from "next-contentlayer/hooks";

export const generateStaticParams = async () =>


  allPosts.map((post) => ({ slug: post._raw.flattenedPath }));
  export const generateMetadata = ({ params }:any) => {
    const post = allPosts.find((post:any) => post._raw.flattenedPath === params.slug)
    return { title: post?.title,description: post?.description }
  }

const PostLayout = ({ params }: { params: { slug: string } }) => {
  const post = allPosts.find(
    (post) => post._raw.flattenedPath === params.slug
  );

  let MDXContent;

  if (!post) {
    return <div>404</div>;
  } else {
    MDXContent = getMDXComponent(post!.body.code);
  }

  return (
    <div>
      <h1>
        {post.title}
      </h1>
      <p>{post.description}</p>
      <article>
        <MDXContent />
      </article>
    </div>
  );
};

export default PostLayout;

pre {
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #f9f8f981;
  overflow: auto;
  font-size: 0.9rem;
  margin: 40px 0;
}
article p {
  font-size: 1rem;
  line-height: 1.8rem;
  margin-top: 20px;
}
article h1 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  margin-top: 60px;
  font-weight: 425;
}

...

import { allWritings } from "contentlayer/generated";
import { getMDXComponent } from "next-contentlayer/hooks";
import { Snippet } from "@geist-ui/core";

...

const CodeSnippet = (props: any) => (
 <Snippet {...props} text={props.text} />
);

 return (
    <div>
      <h1>
        {writing.title}
      </h1>
      <p>{writing.description}</p>
      <article>
        <MDXContent components={{ CodeSnippet }} />
      </article>
    </div>
  );

export default PostLayout;

---
title: How to create a Next.js app
description: Learn how to create a Next.js app
---

# Install Next.js

### First, install Next.js using the following command:

<CodeSnippet text="npx create-next-app@latest" />

import Link from 'next/link'
import { allPosts, Post } from 'contentlayer/generated'

function PostCard(post: Post) {
  return (
    <div>
      <h2>
        <Link href={post.url} legacyBehavior>
          {post.title}
        </Link>
      </h2>
      <p>{post.description}</p>
    </div>
  )
}

function page() {
  const posts = allPosts

  return (
    <div>
      <div>
      {posts.map((post, idx) => (
        <PostCard key={idx} {...post} />
      ))}
      </div>
    </div>
  )
}

export default page;

npm i rehype-pretty-code shiki

import { defineDocumentType, makeSource } from "contentlayer/source-files";
import rehypePrettyCode from "rehype-pretty-code";

const Writing = defineDocumentType(() => ({
  ...
}));

const rehypeoptions = {
    // Use one of Shiki's packaged themes
    theme: "light-plus",
    keepBackground: isDark ,
    onVisitLine(node: any) {
      if (node.children.length === 0) {
        node.children = [{ type: "text", value: " " }];
      }
    },
    onVisitHighlightedLine(node: any) {
      node.properties.className.push("highlighted");
    },
    onVisitHighlightedWord(node: any, id: any) {
      node.properties.className = ["word"];
    },
  };

export default makeSource({
  contentDirPath: "writings",
  documentTypes: [Writing],
  mdx: {
    rehypePlugins: [[rehypePrettyCode, rehypeoptions]],
  },
});