Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pdsuwwz/nextjs-nextra-starter
⚡️ Next.js 快速启动模板, 集成 Tailwind CSS + Nextra (v3) + TypeScript + Shadcn UI + Aceternity UI + Sass, 支持 Iconify 图标集, i18n 多语言国际化 - 响应式、暗黑模式落地页、适合开发个人博客 Blog Starter Template
https://github.com/pdsuwwz/nextjs-nextra-starter
aceternity blog i18n iconify mdx nextra react responsive shadcn ssr starter tailwindcss template ui
Last synced: about 1 month ago
JSON representation
⚡️ Next.js 快速启动模板, 集成 Tailwind CSS + Nextra (v3) + TypeScript + Shadcn UI + Aceternity UI + Sass, 支持 Iconify 图标集, i18n 多语言国际化 - 响应式、暗黑模式落地页、适合开发个人博客 Blog Starter Template
- Host: GitHub
- URL: https://github.com/pdsuwwz/nextjs-nextra-starter
- Owner: pdsuwwz
- License: mit
- Created: 2024-08-01T09:24:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-10T05:51:03.000Z (2 months ago)
- Last Synced: 2024-10-01T05:21:03.675Z (about 2 months ago)
- Topics: aceternity, blog, i18n, iconify, mdx, nextra, react, responsive, shadcn, ssr, starter, tailwindcss, template, ui
- Language: TypeScript
- Homepage: https://nextjs-nextra-starter-green.vercel.app
- Size: 1.41 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nextjs Nextra Starter
[](https://github.com/pdsuwwz/nextjs-nextra-starter/deployments)
[](https://github.com/pdsuwwz/nextjs-nextra-starter/deployments/Production)
[](https://github.com/pdsuwwz)
[](https://github.com/pdsuwwz/nextjs-nextra-starter/blob/main/LICENSE)
⚡️ 快速模板 Starter Template - Next.js + Nextra + TypeScript + TailwindCSS + Shadcn UI
[🚀 Live Demo 在线体验](https://nextjs-nextra-starter-green.vercel.app)
## 🎉 Features
- ⚡️ **Next.js + TypeScript**: 高效的 React 框架和类型安全支持
- 🎨 **Tailwind CSS**: 原子化 CSS, 快速构建自定义、响应式界面 UI
- 🧩 **Shadcn UI**: 高度可定制的 UI 组件集合，无需安装额外依赖
- 📚 **Nextra v3**: 基于 Next.js 的静态站点生成器，专为文档而优化
- 🛠️ **ESLint**: 统一编码风格和最佳实践
- ⛅ **轻量化设计**: 精简项目设置，专注于内容编写
## 前置条件
- React 18.x
- Node >= 18.12.x
- Pnpm 9.x
- **VS Code 插件 `dbaeumer.vscode-eslint` >= v3.0.5 (pre-release)**
## 运行效果
## 安装和运行
- 安装依赖
```bash
pnpm i
```
- 本地开发
```bash
pnpm dev
```
## 使用 Shadcn UI 组件
本项目已集成 [Shadcn UI](https://ui.shadcn.com), 按照以下步骤安装/编辑组件并使用:
### Shadcn 结构初始化
首次执行 `pnpm dlx shadcn-ui@latest init` 命令初始化 `Shadcn UI` 基本项目结构（如果尚未初始化）
💡 注意
> 该初始化命令用于创建 `Shadcn UI` 的基本项目结构
>
> **本项目已完成初始化，无需再次运行此命令**
### 组件安装
1. 使用 `Shadcn CLI` 添加组件:
```bash
pnpm dlx shadcn-ui@latest add <组件名>
```
如添加 `` 组件，执行以下命令即可，[详见文档](https://ui.shadcn.com/docs/components/alert#installation)
```bash
pnpm dlx shadcn-ui@latest add alert
```
2. 使用组件
```tsx
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
export default function Home() {
return (
Heads up!
You can add components and dependencies to your app using the cli.
)
}
```
3. 自定义组件样式（可选）
`Shadcn UI` 组件通常已提供了流行的默认样式和功能，能满足大多数需求，若确实需要进行自定义定制，可编辑相应的组件文件，如：
打开 [`src/components/ui/alert.tsx`](src/components/ui/alert.tsx) 文件来修改 `Alert` 组件的样式
> 注意：在大多数情况下，`Shadcn UI` 提供的默认样式已经足够满足需求，无需进行额外修改
## 🌹 支持
如果你喜欢这个项目或发现有用，可以点右上角 [`Star`](https://github.com/pdsuwwz/nextjs-nextra-starter) 支持一下，你的支持是我们不断改进的动力，感谢！ ^\_^
## License
[MIT](./LICENSE) License | Copyright © 2020-PRESENT [Wisdom](https://github.com/pdsuwwz)