初始化项目
安装nextjs，直接看官网不赘述nextjs。
因为之前从来没用用过react，第一次接触shadcn这样的组件库感到很新奇。导入组件跟常用的AntDesigin和ElementUI不太一样，需要哪个组件就安装哪个组件，因此最开始博主还疑惑，为什么已经安装了组件库，导入时却报错未找到模块？而常规的组件库则是安装所有的组件，打包时移除未被使用的模块。
虽然使用时需要先安装，可能对于开发过程会有点麻烦，但是有个好处就是，可以直接修改组件，实现个性化定制！不需要二次封装，比较自由。博主突然有点爱上react的生态了！
关于CI/CD则采用的是git Actions，由于nextjs是服务端渲染，需要在
并且因为使用的是pnpm，需要在settings中需要修改默认的nextjs.yml文件，否则会build失败。
就这样，初始框架就搭好了！
展示markdown文档
技术选型：
- @next/mdx：MDX 支持 Next.js 的官方插件，并且可以插入react组件。
- next-mdx-remote ：允许你将 .mdx 内容从 远程或本地文件 中读取，并在运行时渲染，而不是构建时就固定写死。
- gray-matter ：从 Markdown 文件中解析出 frontmatter 和正文内容
- 主题样式系统 ：用 Tailwind Typography为markdown优化样式。
路由系统
首先，nextjs的路由系统是基于文件系统路由，因此如果我们需要新增一个路由的话，直接在app下创建一个文件夹就可以了。其次，因为是要做博客网站，所以动态路由也是必不可少的。
我们可以通过params获取当前动态路由，nextjs在构建时会自动注入。
在这里遇到了一个问题，构建时报错：
vbnet
Error: Page "/blog/[...slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.这里是需要generateStaticParams这么一个函数来告诉Next.js为哪些路径生成html页面，并且不需要手动调用；
是由于Next.js 框架层面的"约定优于配置"：
- 它会扫描所有app下的页面文件，在一个动态路由页面文件中发现了一个名为 generateStaticParams 的 export 函数时，它就知道："哦，开发者想告诉我这个动态路由有哪些具体的路径需要被预先构建成静态页面。"，
- Next.js 会在内部自动执行这个 generateStaticParams 函数。
- 它会获取你从函数中 return 的那个包含所有 slug 的数组，然后遍历这个数组。对于数组中的每一个 slug，Next.js 都会像模拟用户访问一样，调用你的页面组件，并将对应的 slug 作为 params 传入，从而为每一篇页面组件生成一个完整的、独立的 HTML 文件。
格式化内容
gray-matter格式化markdown文件内容，因此我们可以获取到文档的元信息和文档具体内容，拿到这些信息就能开始渲染文档了。
使用next-mdx-remote渲染我们的mdx文件，并且还能注册我们的react组件直接展示在markdown文件里
使用Tailwind Typography 优化我们的文档样式，在这里博主在cursor上栽了一个大坑，习惯用AI的博主用cursor生成的代码，结果始终不能正常显示样式，最后发现！！在css里没有注册Typography！博主自己去看了眼官网才发现，看来还是不能太依赖AI！除此之外，需要在dom上添加prose类，就能正常显示了。
以上就是我的个人网站开发日志啦，中间虽然遇到了不少问题，也是我第一次接触nextjs和上手写react，感觉还是挺新奇的！