如何在nextjs项目里加一个博客框架

1. 在terminal里安装dependencies

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

2. 在最高层（和package.json平行的位置）写一个mdx-components.tsx文件

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

3. 在next.config.mjs中加入mdx的配置

import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions` to include markdown and MDX files
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  // Optionally, add any other Next.js config below
}
 
const withMDX = createMDX({
  // Add markdown plugins here, as desired
})
 
// Merge MDX config with Next.js config
export default withMDX(nextConfig)

4. 现在试着加入一个demo页面 在app文件夹下面新建blogs/demo/page.mdx 写入markdown

5. 如果你像我一样用tailwind，你还需要做这些事： 首先安装一个tailwind有关的dependency

npm install @tailwindcss/typography

然后在tailwind.config.ts里加入这个plugin

  plugins: [require('@tailwindcss/typography')]

最后，在blogs文件夹下加入一个新的layout.tsx文件

export default function MdxLayout({ children }: { children: React.ReactNode }) {
  // Create any shared layout or styles here
  return (
    <div>
      <div className="mx-auto prose dark:prose-invert">
        {children}
      </div>
    </div>
  )
}

这样，所有的mdx文件都可以共享风格。

6. 你也可以在你的IDE里面安装mdx文件的preview插件。比如我在VS里安装了mdx preview。这样我就可以看到markdown的效果.