博客使用的技术栈与库

这篇文章介绍搭建博客所使用的技术栈和库，并说明它们各自的作用以及选择原因。

Next.js↗ 我选择Next.js作为最基础的框架。 Next.js是一个基于的框架，支持（Server Side Rendering，服务器端渲染）。 SSR有利于（Search Engine Optimization，搜索引擎优化），在需要的地方合理使用，也能带来良好的性能。 另一个优点是，不用单独搭建后端服务器，也能访问数据库。

TypeScript↗ 这个项目使用TypeScript编写。 TypeScript是的扩展语言，支持静态类型。 使用TypeScript能够提高代码可读性，并减少运行时错误。

Tailwind CSS↗ Tailwind CSS是一个框架，通过类名应用样式。 此前在React中使用的CSS-in-JS方式，并不能直接完整地用于SSR。 由于CSS-in-JS在客户端运行时应用样式，SSR阶段不会应用这些样式。 nextjs css-in-js docs↗

要使用这种方式，还需要额外配置。 而通过类名应用样式，因此在SSR中也能正常工作。 虽然初始配置和使用方式比较陌生，但我认为熟悉之后可以提高开发速度。

Shadcn/UI↗ 这是一个基于Tailwind CSS的Headless UI库，便于自定义。 它已经实现了基本功能，即使不单独进行设计，也能加快开发。

next-mdx-remote↗ 这个博客的文章使用Markdown语法编写。 此外，我还使用了可以混合Markdown和JSX语法的文件。 为了渲染这些内容，我采用了。 除了这个库，编译MDX文件还有其他几种选择，例如velite、contentlayer和next/mdx。 不过，考虑到部分方案尚不稳定或停止维护等情况，我最终选择了next-mdx-remote。 官方文档中也提供了使用next-mdx-remote的示例，相关资料比较丰富，这也是我选择它的原因。 Next.js官方文档（next-mdx-remote）↗

gray-matter↗ 这个库用于提取Markdown文件的frontmatter。 frontmatter位于Markdown文件顶部，用于保存元数据。 开发初期，我把标题、撰写日期等元数据放在MDX文件中，再提取出来使用；目前这个方式只用于测试。

rehype↗ rehype是一个用于解析和转换HTML的库。 我通过next-mdx-remote把MDX内容转换为HTML，再使用rehype进行解析和转换。 它主要用于样式处理和自定义。 例如，为标题标签，或者。 尤其是使用时，还可以渲染数学公式。

Prisma↗ 这是创建API端点时，用于访问数据库的库。 Prisma是一个ORM（Object-Relational Mapping，对象关系映射）库，不必直接编写SQL也能访问数据库。 我使用的是Supabase的PostgreSQL，而PostgreSQL也是Prisma重点支持的数据库。 此外，它还支持TypeScript，具有代码自动补全、类型检查等优点。

这些技术栈和库，是我在当时认为最合适的选择。 不过，库和技术都在快速变化和发展，今后我也想继续尝试新的技术和库。 为了未来可能出现的，我尽量降低对库的依赖，并在开发时明确每个库的职责。