1小时带你写一个高逼格的Blog
使用Next.js构建博客.
2023-07-06 16:18:27
https://www.kozhuhds.com/blog/how-to-build-a-static-mdx-blog-with-nextjs-and-contentlayer
Step 1: Setup Next.js with static export Step 2: Contentlayer
Contentlayer 内容层 I am still using Contentlayer to compile my Markdown files. Some of the reasons you might love Contentlayer include: 我仍在使用 Contentlayer 来编译我的 Markdown 文件。您可能喜欢 Contentlayer 的一些原因包括：
Easily import your content as data 轻松将内容导入为数据 Use JS/TS — no new query language to learn 使用 JS/TS — 无需学习新的查询语言 Strong-typed data with auto-generated type definitions 具有自动生成的类型定义的强类型数据 Built-in and configurable content validations 内置和可配置的内容验证 Detailed error messages 详细的错误消息 Fast build and page performance 快速构建和页面性能
Why Contentlayer? 为什么选择内容层？ I chose Contentlayer ↗ for managing static content in my Next.js project for several reasons: 我选择 Contentlayer↗ 来管理我的 Next.js 项目中的静态内容有几个原因：
Ease of integration: Contentlayer integrates seamlessly with Next.js, making it easy to fetch and manage content from various sources like Markdown, YAML, or JSON files. 易于集成：Contentlayer 与 Next.js 无缝集成，可以轻松从各种来源（如 Markdown、YAML 或 JSON 文件）获取和管理内容。
MDX support: Contentlayer works well with MDX, enabling me to write my blog posts in Markdown while leveraging the power of React components, rehype plugins ↗, and remark plugins ↗. MDX 支持：Contentlayer 与 MDX 配合得很好，使我能够在 Markdown 中编写博客文章，同时利用 React 组件，re 炒作插件和评论插件 ↗↗ 的强大功能。
Type safety: Contentlayer generates TypeScript types based on your content schema, providing type safety for your content. This feature helps catch potential errors early in the development process, improving code quality and maintainability. 类型安全：Contentlayer 根据您的内容架构生成 TypeScript 类型，为您的内容提供类型安全。此功能有助于在开发过程的早期捕获潜在错误，从而提高代码质量和可维护性。
Hot Module Replacement (HMR): Contentlayer supports Hot Module Replacement, allowing for real-time updates to your content without needing to refresh the page. This feature enhances the developer experience by providing instant feedback during content creation and editing. 热模块更换 （HMR）：Contentlayer 支持热模块更换，无需刷新页面即可实时更新您的内容。此功能通过在内容创建和编辑期间提供即时反馈来增强开发人员体验。
Flexible content modelling: Contentlayer allows for flexible content modelling through its configuration file. You can define custom content types, fields, and relationships, making it suitable for various use cases and content structures. 灵活的内容建模：Contentlayer 允许通过其配置文件进行灵活的内容建模。您可以定义自定义内容类型、字段和关系，使其适用于各种用例和内容结构。
By using Contentlayer, I was able to efficiently manage my static content, optimise the build process, and create more engaging and dynamic blog posts with MDX support. 通过使用 Contentlayer，我能够有效地管理我的静态内容，优化构建过程，并在 MDX 支持下创建更具吸引力和动态的博客文章。
Step 3: Routing and page layout
Step 4: Content page with MDX