使用 Next.js、Tailwind CSS 与 MDX 构建的博客模板
Next.jsReact博客
devnyxie.com — Next.js 博客模板
作者 devnyxie
基于 Next.js、Tailwind CSS 与 MDX 的极简博客模板，内容通过配置文件管理，构建时处理 MDX 并生成静态页面。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-14查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
构建时通过 velite 编译全部 MDX，输出带类型的 JS 模块
Markdown 支持 front matter、语法高亮与主题
集成 remark-gfm、rehype-slug、rehype-autolink-headings 等 Markdown 处理插件
README 称可通过配置文件管理博客全部内容
使用 zod 进行静态内容校验与类型化
模板详细介绍
devnyxie.com 是一个博客模板，README 说明其使用 Next.js、Tailwind CSS 和 MDX 构建，定位为极简、快速且可访问。内容管线在构建时用 velite 编译全部 MDX 并输出带类型的 JS 模块，同时用 @mdx-js/mdx 处理来自 YAML 的内容页面；Markdown 支持 front matter、语法高亮与主题，并集成 remark-breaks、remark-gfm、rehype-slug、rehype-autolink-headings、@shikijs/rehype 等插件。模板强调配置驱动，README 称可通过配置文件管理博客的全部内容，并说明大部分内容为静态生成。README 未提供页面结构、路由方案、具体配置字段、主题定制方式或部署步骤的说明，也未列出 Next.js 等框架的具体版本号。
Next.js博客
适合你的项目吗？
适用场景
- 搭建以 Markdown/MDX 撰写文章的博客
- 需要构建时处理内容并输出静态页面的项目
- 希望通过配置文件集中管理博客内容的场景
适合人群
- 熟悉 Next.js 与 Tailwind CSS 的开发者
- 偏好用 Markdown 或 MDX 写作的博主
- 需要内容构建时编译与静态生成方案的项目
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
README 说明项目使用 Node.js 24 LTS 与 pnpm 作为包管理器
- 2
README 的 Development 章节列出设置开发环境的步骤标题，但未提供具体命令或操作内容
- 3
README 未提供部署步骤说明
- 4
public/* 与 content/* 目录不在 MIT 许可范围内，未经原作者明确许可不得使用、复制、修改或分发
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- MIT 许可不覆盖 public/* 与 content/* 两个目录；未经原作者明确许可，不得以任何形式使用、复制、修改或分发这些目录中的内容。
- 开发环境要求使用 Node.js 24 LTS，并以 pnpm 作为包管理器。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
The project is licensed under the [MIT License](LICENSE), except for the two directories: `public/*` and `content/*`, which are not included in the license and are strictly prohibited from being used, copied, modified, or distributed in any form without explicit permission from the original author.
README 原文
https://github.com/devnyxie/devnyxie.com/blob/main/LICENSEhttps://github.com/devnyxie/devnyxie.com/blob/main/README.mdWe are utilizing Node.js 24 LTS for this project, along with `pnpm` as our package manager. To set up the development environment, please follow these steps:
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-14。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 83 / 100
- 技术栈
- Next.js · React
- 网站类型
- 博客
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-06-02
- 截图检查日期
- 2026-10-14
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16
查看当时使用的来源资料
SHA-256: b88a6026be9e4c3b29b8c6fd78aa16f15ac01c3dd5edee8ad384e169752a45a2
2026-10-14T10:17:50.140Z
来源文件 / 仓库# devnyxie.com       A minimalist, fast, and accessible blog template built with `Next.js`, `Tailwind CSS` and `MDX`. <img src="screenshot.png" alt="Screenshot of devnyxie.com" /> ## Features - **Awesome Markdown Support**: Write your blog posts in Markdown with support for front matter, along with cool syntax highlighting and themes. - **Config Driven**: Easily manage **all** content of your blog through configuration files. - **SEO Optimized**: Built with SEO best practices in mind, almost everything is statically generated for optimal performance and minimal server load. ## Dependencies Overview ### Content Pipeline - `velite` for build-time content processing — compiles all MDX once, outputs typed JS modules - `@mdx-js/mdx` for runtime MDX compilation (YAML-sourced content pages) - `remark-breaks` for converting line breaks to `<br>` tags - `remark-gfm` for GitHub Flavored Markdown support - `rehype-slug` for adding slugs to headings - `rehype-autolink-headings` for adding links to headings - `@shikijs/rehype` for syntax highlighting - `shiki` for syntax highlighting engine - `js-yaml` for YAML parsing - `zod` for static content validation and typization ### Components & UI - `tailwind-merge` for merging Tailwind CSS classes - `clsx` for conditional class names - `class-variance-authority` for managing component variants - `next-themes` for theme management - `@radix-ui/react-slot` for composable component slots - `@radix-ui/react-navigation-menu` for accessible navigation menus - `lucide-react` for React icon components - `@tabler/icons-react` for Tabler icon components ### Animations & Interactions - `framer-motion` for animations and transitions - `react-intersection-observer` for intersection observer hooks ### Development & Data - `glob` for file pattern matching - `react-activity-calendar` for GitHub-style activity calendars ## Roadmap - [ ] Overall Normalization of styles - paddings, margins, font sizes ## Development We are utilizing Node.js 24 LTS for this project, along with `pnpm` as our package manager. To set up the development environment, please follow these steps: ## License The project is licensed under the [MIT License](LICENSE), except for the two directories: `public/*` and `content/*`, which are not included in the license and are strictly prohibited from being used, copied, modified, or distributed in any form without explicit permission from the original author.
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
tailwind-nextjs-starter-blog
tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…
Next.js · 博客
Nextjs-tailwindcss-blog-template
使用 Tailwind CSS 的 Next.js 博客。当前分支通过 Velite 处理 Markdown，早期 Contentlayer 实现保留在单独的历史分支中。
Next.js · 博客
Next-js-Blog-Boilerplate
Next-js-Blog-Boilerplate 是一套面向个人与技术博客的启动代码，基于 Next.js 12 与 Tailwind CSS 3 构建，同时集成了 TypeScript、ESLint、Prettier …
Next.js · 博客
nextjs-blog-theme
nextjs-blog-theme 是 Netlify 团队维护的一个博客启动模板，基于 Next.js 15（Pages Router）和 Tailwind CSS 4.x 构建，设计由 Bejamas 机构完成。
Next.js · 博客
blog
🚀 My personal blog made with Tailwind CSS and NextJS. Template from Timlrx. Feel free to fork, follow and use…
Next.js · 博客
tailnext
Tailnext 是一个基于 Next.js 14 App Router 和 Tailwind CSS 的免费开源模板，由 onWidget 团队创建并维护。
Next.js · 博客