先完成开发博客所需的基础配置。
这篇文章将介绍以下内容。
- 创建Next.js项目
- 配置Tailwind CSS(Shadcn/ui)
👨💻
需要安装Node.js 18或更高版本以及npm。
执行以下命令,创建Next.js项目。
npx create-next-app@latest

这里全部使用默认设置。
- 输入
项目名称
。
- 选择是否使用
TypeScript
。
- 选择是否使用
ESLint
。
- 选择是否使用
Tailwind CSS
。
- 选择是否创建**'src/'**目录。
- 选择是否使用
App Router
(Next.js 13及以上版本支持)。
- 选择是否修改
绝对路径配置
。
项目创建完成后,执行以下命令,将相关包安装或更新到最新版本。
cd {프로젝트 이름}
npm install next@latest react@latest react-dom@latest
执行以下命令启动项目。

此页面由`src/app/page.tsx`文件渲染。
Shadcn/ui是一个使用Tailwind CSS的UI库。
Shadcn/ui↗
执行以下命令安装Shadcn/ui。
tailwind-merge是Shadcn/ui所使用的插件。
npx shadcn-ui@latest init
npm i tailwind-merge

这里使用默认配置。
安装tailwindcss/typography(可选) 🔗
创建Next.js项目时,通常已经完成了Tailwind CSS配置。
不过,Tailwind CSS会重置HTML标签的样式,因此之后渲染Markdown文件时,原本预期的样式不会生效。
用于解决这个问题的是
prose选项。
prose通过
tailwindcss/typography插件,为渲染出的Markdown内容应用样式。
执行以下命令安装
tailwindcss/typography插件。
npm i @tailwindcss/typography
打开tailwind.config.ts文件,按以下方式添加插件。
tailwind.config.tsmodule.exports = {
// ...
plugins: [
require('@tailwindcss/typography'),
// ...
],
// ...
}