Tailwind Nextjs 入门博客 v2.0 发布

介绍

欢迎使用 Tailwind Nextjs 入门博客模板 v2.0。此版本是对代码库的重大重构，以支持 Nextjs App 目录和 React Server Components。继续阅读以发现新特性以及如何从 V1 迁移。

• 介绍
• 从 V1 到 V2
• Next.js App 目录和 React Server Components
• 以 TypeScript 优先
• Contentlayer
• Pliny
• 新搜索组件
  • Algolia
  • Kbar
• 样式和布局更新
  • 主题
  • 新布局
• 迁移建议
• 结论
• 支持
• 许可证

从 V1 到 V2

该模板于 2021 年 1 月首次发布，此后已被数千名用户使用。它在 Next.js Templates、Tailwind Awesome 等列表网站中都有展示。它每天吸引 200+ 独立访客，获得 1500-2000 次页面浏览，有 1.3k 个 fork 和许多其他克隆。

非常感谢用户和贡献者社区使这个模板取得成功！我制作了一个博客的小视频蒙太奇（同时在整理 readme 中的列表），以展示使用该模板创建的博客的多样性，并庆祝这一里程碑：

第 2 版建立在前一版本的成功基础上，并引入了许多新功能和改进。代码库已重构以支持 Next.js App 目录和 React Server Components。Markdown / MDX 现在使用 Contentlayer 处理，这是一个类型安全的内容 SDK，可将您的内容验证并转换为类型安全的 JSON 数据。它与 Pliny 集成，这是一个新库，提供开箱即用的 Next.js 组件，通过分析、评论和新闻订阅来增强您的静态网站。模板中还添加了一个新的命令面板（⌘-k）搜索组件。

让我们深入了解 V2 中的新功能和改进。

Next.js App 目录和 React Server Components

现在 Next.js App 路由器 终于稳定了，并且与页面路由器在功能上基本兼容，代码库已迁移到新的设置。这允许混合渲染方法，使用在服务器端生成的 React Server Components 以实现更快的页面加载和更小的包大小，同时保留添加客户端 React 组件以实现交互性的能力。¹

有了额外的能力，就需要学习新的范式。我已迁移代码库以尽可能利用新功能。这包括文件夹结构的更改、将组件拆分为服务器与客户端组件、利用服务器端数据获取以及使用推荐的 Metadata API 以实现 SEO 可发现性。

虽然这在某种程度上简化了代码库，但它使得从旧代码库迁移变得更加困难。如果您希望迁移，我建议从全新的模板开始，复制您的自定义设置和现有内容。有关更多详细信息，请参阅迁移建议部分。

以 TypeScript 优先

代码库已迁移到 TypeScript。虽然以前版本的模板同时提供 JavaScript 和 TypeScript，但我决定减少维护负担并专注于 TypeScript。这也允许在 IDE 中进行更好的类型检查和代码补全。

TypeScript 也与我们新的类型安全 Markdown 处理器 - Contentlayer 完美匹配。

Contentlayer

Contentlayer 是一个内容 SDK，可将您的内容验证并转换为类型安全的 JSON 数据，您可以轻松将其导入到您的应用程序中。它使处理本地 Markdown 或 MDX 文件变得轻而易举。这取代了 MDX-bundler 和我们自己的 Markdown 处理工作流程。

首先，定义一个内容源，指定文档类型的名称、所在位置以及前置元数据字段和任何应作为过程一部分生成的附加计算字段。

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'blog/**/*.mdx',
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
    tags: { type: 'list', of: { type: 'string' }, default: [] },
    ...
  },
  computedFields: {
    readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath.replace(/^.+?(\/)/, ''),
    }
    ...
  },
}))

然后，Contentlayer 使用我们所需的 Markdown remark 或 rehype 插件处理 MDX 文件，验证模式，生成类型定义并输出可以轻松导入我们页面的 JSON 文件。热重载开箱即用，因此对 Markdown 文件的编辑将立即反映在浏览器中！

Pliny

该模板受欢迎的一个重要原因是其可定制性以及与从分析提供商到评论解决方案等其他服务的集成。然而，这意味着即使用户不使用该功能，也必须将大量样板代码与模板放在同一位置。更新和错误修复必须手动复制到用户的代码库中。

为了解决这个问题，我将逻辑抽象到一个单独的仓库 - Pliny。Pliny 提供开箱即用的 Next.js 组件来增强静态网站：

• 分析
  • Google Analytics
  • Plausible Analytics
  • Simple Analytics
  • Umami Analytics
  • Posthog
• 评论
  • Disqus
  • Giscus
  • Utterances
• 新闻订阅（使用 Next 13 API 路由）
  • Buttondown
  • Convertkit
  • Email Octopus
  • Klaviyo
  • Mailchimp
  • Revue
• 带有 Tailwind 样式表的命令面板搜索
  • Algolia
  • Kbar（本地搜索）
• UI 实用组件
  • Bleed
  • Newsletter / Blog Newsletter
  • Pre / Code block
  • Table of Contents

通过修改 siteMetadata.js 并更改适当的字段来选择您的首选服务。例如，要从 Umami Analytics 更改为 Plausible，我们可以更改以下字段：

analytics: {
-   umamiAnalytics: {
-     // We use an env variable for this site to avoid other users cloning our analytics ID
-     umamiWebsiteId: process.env.NEXT_UMAMI_ID, // e.g. 123e4567-e89b-12d3-a456-426614174000
-   },
+    plausibleAnalytics: {
+      plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    },
},

配置文件的更改会自动传播到组件。无需修改模板。

在底层，Pliny 导出高级组件，例如 <Analytics analyticsConfig={analyticsConfig}/> 和 <Comments commentsConfig={commentsConfig}/>，它们接收一个配置对象并渲染适当的组件。由于布局是在服务器端定义的，Next.js 能够使用配置对象来确定要渲染哪个组件，并仅将所需的组件包发送到客户端。

新搜索组件

2023 年的博客怎么能没有命令面板搜索栏？

最受期待的功能之一已经添加 🎉！搜索组件支持 2 个搜索提供商 - Algolia 和 Kbar 本地搜索。

Algolia

Algolia Docsearch 是许多文档网站使用的流行免费服务。它会自动抓取提交进行索引的网站，并通过美观的对话框模态提供搜索结果。pliny 组件深受 Docusaurus 实现的启发，并附带与 Tailwind CSS 主题兼容的样式表。

Kbar

Kbar 是一个快速、可移植且可扩展的 cmd+k 界面。pliny 实现使用 kbar 创建本地搜索对话框。组件加载一个在 Contentlayer 构建过程中创建的 JSON 文件，默认 search.json。尝试按 ⌘-k 或 ctrl-k 查看搜索栏的实际效果！

样式和布局更新

主题

tailwind.config.js 已更新为尽可能使用 Tailwind 排版默认值，并通过 prose-invert 类使用内置的深色模式支持。这取代了之前的 prose-dark 类和配置。

主主题颜色从 teal 更新为 pink，主灰色主题从 neutral 更新为 gray。

Inter 现在被 Space Grotesk 替换为默认字体。

新布局

layouts 目录中可用的布局组件提供了一种自定义博客外观的简单方式。²

构建流行模板的缺点是，你开始到处看到多个相似的网站 😆。虽然鼓励用户根据自己的喜好自定义布局，但拥有更多易于切换的布局选项可以促进多样性，也许可以成为进一步定制的好起点。

在 v2 中，我添加了一个新的文章布局 - PostBanner。它具有大横幅图片和居中的内容容器。查看已更新使用新布局的 "加拿大图片" 博客文章。

默认博客列表布局也已更新为包含带有博客标签的侧边栏。之前布局中的搜索栏已被新的命令面板搜索取代。要切换回旧布局，只需将使用 ListLayoutWithTags 组件的页面改回原始的 ListLayout。

迁移建议

由于目录结构、设置和工具的重大变化，我建议从全新的模板开始，复制现有内容，然后逐步将更改迁移到新模板。

样式更改应该相对较小，可以从旧的 tailwind.config.js 复制到新的。如果复制，您可能需要将 prose-dark 类添加回选择使用 Tailwind 排版样式的组件。记得在根布局组件中修改字体导入以使用您想要的字体。

对 MDX 处理管道和模式的更改可以轻松移植到新的 Contentlayer 设置。如果有对前置元数据字段的更改，您可以修改 contentlayer.config.ts 中的文档类型以包含新字段。自定义插件可以添加到 contentlayer.config.ts 的 makeSource 导出的 remarkPlugins 和 rehypePlugins 属性中。

Markdown 布局不再自动从 layouts 目录获取。相反，它们必须在 blog/[...slug]/page.tsx 中定义的 layouts 对象中指定。³

要移植较大的组件或页面，我建议首先通过使用 "use client" 指令将其指定为客户端组件。一旦它正确渲染，您可以将交互式组件（依赖 use 钩子的部分）拆分为客户端组件，并将剩余的代码保留为服务器组件。查阅全面的 Next.js 迁移指南 以获取更多详细信息。

结论

希望你喜欢 V2 中的新功能和改进。如果您有任何反馈或建议，请随时在 GitHub 上提出问题或在 Twitter 上与我联系。

支持

正在使用这个模板？通过在 GitHub 上给星标、分享您自己的博客并在 Twitter 上大声疾呼，或成为项目赞助者来支持这项工作。

许可证

MIT © Timothy Lin