Tailwind Nextjs Starter Blog v2.0 发布

介绍

欢迎来到 Tailwind Nextjs Starter Blog 模板 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 模板、Tailwind Awesome 等其他列表网站收录。它每天吸引 200 多名独立访客，获得 1500-2000 次页面浏览量，拥有 1.3k 个分支和许多其他克隆版本。

非常感谢用户和贡献者社区让这个模板取得成功！我创建了一个博客视频集锦（同时在清理 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 路由终于稳定，并且在功能上与 Page Router 大部分兼容，代码库已迁移到新设置。这允许混合渲染方法，使用在服务器端生成的 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 处理工作流。

首先，定义内容源，指定文档类型的名称、它所在的位置以及 frontmatter 字段和应在流程中生成的任何其他计算字段。

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 创建本地搜索对话框。组件加载一个 JSON 文件，默认为 search.json，该文件是在 contentlayer 构建流程中创建的。尝试按 ⌘-k 或 ctrl-k 来查看搜索栏的实际效果！

样式和布局更新

主题

tailwind.config.js 已更新，以尽可能使用 tailwind typography 默认值，并使用 prose-invert 类内置支持暗色模式。这取代了之前的 prose-dark 类和配置。

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

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

新布局

layouts 目录中提供的布局组件提供了一种自定义博客外观和感觉的简单方法。²

构建受欢迎模板的缺点是您开始到处看到多个类似的网站 😆。虽然鼓励用户根据自己的喜好自定义布局，但拥有更多易于切换的布局选项可以促进多样性，并且可能是进一步自定义的良好起点。

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

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

迁移建议

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

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

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

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

要移植更大的组件或页面，我建议首先使用 "use client" 指令将其指定为客户端组件。一旦它正确渲染，您可以将交互组件（依赖 use hooks 的部分）拆分为客户端组件，并将剩余代码保留为服务器组件。请参阅全面的 Next.js 迁移指南了解更多详情。

结论

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

支持

使用该模板？通过在 GitHub 上给出星标、分享您自己的博客或在 Twitter 上宣传或成为项目赞助商来支持这项工作。

许可证

MIT © Timothy Lin