Next.jsReact博客

next-minimal-blog — Next.js 博客模板

作者 cakegaly

基于 Next.js 的极简博客模板,使用 MDX 管理静态内容,配合 Tailwind CSS 与 shadcn/ui 构建界面。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

使用 MDX 管理文章内容,无需数据库或后台系统

02

界面基于 Tailwind CSS 与 shadcn/ui 组件构建

03

通过 Rehype Pretty Code 与 Shiki 实现代码语法高亮

04

项目结构遵循官方优先与最小依赖的思路

05

仓库为公开模板,可直接基于它创建新项目

06

代码采用 MIT 许可,允许修改、商用与分发

模板详细介绍

这是一个面向博客场景的 Next.js 模板,采用 MDX 作为静态内容管理方式,文章以 MDX 文件形式维护,适合不需要数据库或后台管理系统的写作型站点。样式层使用 Tailwind CSS,界面组件来自 shadcn/ui,代码高亮通过 Rehype Pretty Code 与 Shiki 实现。项目强调官方优先与最小依赖,尽量使用 Next.js 官方能力,避免引入多余依赖。仓库提供本地运行说明:克隆后安装依赖、复制 .env.example 为 .env.local,并将 NEXT_PUBLIC_APP_URL 设为 http://localhost:8888,随后执行构建与开发命令,在本地 8888 端口预览。仓库为公开模板,可直接以模板方式创建自己的项目,示例站点部署在 Vercel。代码采用 MIT 许可,可免费使用、修改、商用与分发,但演示图片、字体、图标等第三方素材需单独核对许可,托管等外部服务可能产生费用。

Next.js博客

适合你的项目吗?

适用场景

  • 搭建以写作为主的个人技术博客
  • 需要一个轻量、无数据库的静态内容站点
  • 希望用 MDX 编写并管理文章内容的项目
  • 作为学习 Next.js 与 shadcn/ui 组合的起点

适合人群

  • 熟悉 Next.js 与 MDX 的前端开发者
  • 偏好用文件而非 CMS 管理内容的写作者
  • 需要可自由修改与商用的开源博客模板的团队

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后使用 pnpm 安装依赖

  2. 2

    将 .env.example 复制为 .env.local,并把 NEXT_PUBLIC_APP_URL 设为 http://localhost:8888

  3. 3

    依次执行构建与开发命令,在本地 8888 端口预览

  4. 4

    仓库为公开模板,可通过 Use this template 直接创建新项目

  5. 5

    演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 本地运行需将环境变量 NEXT_PUBLIC_APP_URL 设置为 http://localhost:8888,否则站点地址配置不正确。
  • 示例站点托管在 Vercel,自行部署到 Vercel 等外部托管服务可能产生费用或需要相应账号。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Please set `http://localhost:8888` to `NEXT_PUBLIC_APP_URL`.

README 原文

This project is automatically deployed on **[Vercel](https://next-minimal-blog-delta.vercel.app/)**.

README 原文
https://github.com/cakegaly/next-minimal-blog/blob/main/LICENCEhttps://github.com/cakegaly/next-minimal-blog/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 87 / 100
技术栈
Next.js · React
网站类型
博客
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-05-21
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: d6e7074a7dad93d5ef064bc5c579bca10191ad5ec91aed9604fbc744ee3a65b8

2026-10-03T21:02:24.260Z

来源文件 / 仓库
# Next.js Minimal Blog Template

This is a lightweight, minimalistic blog template built with Next.js 15, MDX, Tailwind CSS, and shadcn/ui.

![Demo ScreenShot](/public/images/demo/screenshot.png)

## Tech Stack

- Framework - [Next.js](https://nextjs.org/15) (v15)
- Language - [TypeScript](https://www.typescriptlang.org)
- Styling - [Tailwind CSS](https://tailwindcss.com) (v4)
- UI Components - [shadcn/ui](https://ui.shadcn.com)
- Static Content Management - [MDX](https://mdxjs.com)
- Syntax Highlight - [Rehype Pretty Code](https://rehype-pretty.pages.dev/) + [Shiki](https://github.com/shikijs/shiki)
- Deployment - [Vercel](https://vercel.com)
- Code Linting - [ESLint](https://eslint.org) (v9, Flat Config)
- Code Formatting - [Prettier](https://prettier.io)

## Project Philosophy

This project follows a **minimalist approach** to building a **Next.js-based MDX blog**.

- **Official-First**: Prioritize using **official Next.js libraries** to ensure stability and maintainability.
- **Minimal & Fast**: Keep the project **lightweight and fast**, avoiding unnecessary dependencies.

## Running Locally

Follow these steps to set up and run the project on your local machine.

### Clone the repository

> [!NOTE]
> This repository is set as a Public Template, so you can use it as a template by clicking "Use this template"!

```sh
git clone [email protected]:cakegaly/next-minimal-blog.git
cd next-minimal-blog
```

### Install dependencies & Set up environment variables

```sh
pnpm i
cp .env.example .env.local
```

Please set `http://localhost:8888` to `NEXT_PUBLIC_APP_URL`.

### Build the project

```sh
pnpm build
```

### Start the development server

```sh
pnpm dev
```

### Open in your browser

Visit **[http://localhost:8888](http://localhost:8888)** to see the site in action 🎅

## Deployment

This project is automatically deployed on **[Vercel](https://next-minimal-blog-delta.vercel.app/)**.

## License

This project is licensed under the **MIT License**.

## Thanks

This project was inspired by and heavily influenced by the following open-source projects:

- [shadcn/ui](https://github.com/shadcn-ui/shadcn-ui) – The best UI library for building modern, accessible design systems. This incredible project served as the foundation for the design of this template.
- [shadcn/taxonomy](https://github.com/shadcn-ui/taxonomy) – A well-structured and minimal approach to building content-driven applications with Next.js and shadcn/ui.
- [astro-nomy](https://github.com/mickasmt/astro-nomy) – A beautifully designed Astro blog template that influenced the content and design philosophy of this project.

---

If you find this project useful, feel free to give it a ⭐ on GitHub!
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。