搭配 Next.js 使用

Velite 非常喜爱 Next.js，这是一个用于构建全栈 Web 应用程序的优秀框架。

以下示例可能会对您有所帮助：

• zce/taxonomy - 使用 Velite 的 shadcn-ui/taxonomy 分支。

此示例展示了如何在 Next.js 中使用 Velite。

在线试用

源代码

👉 https://stackblitz.com/github/zce/velite/tree/main/examples/nextjs

查看 examples 获取更多示例。

项目结构

nextjs
├── app                      # Next.js 应用目录
│   ├── layout.tsx
│   ├── page.tsx
│   └── etc...
├── components
│   ├── mdx-content.tsx
│   └── etc...
├── content                  # 内容目录
│   ├── categories
│   │   ├── journal.jpg
│   │   ├── journal.yml
│   │   └── etc...
│   ├── options
│   │   └── index.yml
│   ├── pages
│   │   ├── about
│   │   │   └── index.mdx
│   │   └── contact
|   |       ├── img.png and more...
│   │       └── index.mdx
│   ├── posts
│   │   ├── 1970-01-01-style-guide
│   │   │   ├── cover.jpg and more...
│   │   │   └── index.md
│   │   └── 1992-02-25-hello-world
│   │       ├── cover.jpg and more...
│   │       └── index.md
│   └── tags
│       └── index.yml
├── public                   # 公共资源目录
│   ├── favicon.ico
│   └── etc...
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── velite.config.ts         # Velite 配置文件

使用方法

$ npm install # 安装依赖
$ npm run dev # 运行开发模式（监听文件变化并构建）
$ npm run build # 使用 velite 构建内容

关于在 Next.js 中使用 Velite 的更多详细信息，请参阅 与 Next.js 集成。