https://github.com/pdsuwwz/nextjs-nextra-starter
⚡️ 一个 Next.js 快速启动模板, 集成 Tailwind CSS (v4) + React (v19) + Nextra (v4) + TypeScript + Shadcn UI + Radix UI + Aceternity UI + ESLint(v9) + Sass, 支持 Iconify 图标集, i18n 多语言国际化 - 响应式、暗黑模式落地页、适合开发个人博客 Blog Starter Template, Deployed on Netlify and Vercel.
https://github.com/pdsuwwz/nextjs-nextra-starter
aceternity blog i18n iconify mdx nextra radix react responsive shadcn ssg ssr starter tailwindcss template ui vercel
Last synced: 21 days ago
JSON representation
⚡️ 一个 Next.js 快速启动模板, 集成 Tailwind CSS (v4) + React (v19) + Nextra (v4) + TypeScript + Shadcn UI + Radix UI + Aceternity UI + ESLint(v9) + Sass, 支持 Iconify 图标集, i18n 多语言国际化 - 响应式、暗黑模式落地页、适合开发个人博客 Blog Starter Template, Deployed on Netlify and Vercel.
- Host: GitHub
- URL: https://github.com/pdsuwwz/nextjs-nextra-starter
- Owner: pdsuwwz
- License: mit
- Created: 2024-08-01T09:24:25.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-08T06:45:58.000Z (22 days ago)
- Last Synced: 2025-04-08T07:24:15.716Z (22 days ago)
- Topics: aceternity, blog, i18n, iconify, mdx, nextra, radix, react, responsive, shadcn, ssg, ssr, starter, tailwindcss, template, ui, vercel
- Language: TypeScript
- Homepage: https://nextjs-nextra.netlify.app
- Size: 1.6 MB
- Stars: 103
- Watchers: 1
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
README
# Nextjs Nextra Starter
English | [中文](README.md)
[](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)
⚡️ Fast Template Starter - React v19 + Next.js + Nextra (v4) + TypeScript + TailwindCSS (v4) + Shadcn UI
[🚀 Live Demo](https://nextjs-nextra.netlify.app/en)
## 🚀 What's New
- **Tailwind CSS v4 Upgrade**: Fully upgraded to Tailwind CSS v4, optimizing performance and introducing new features.
- **Nextra v4 Refactoring**: Upgraded to Nextra v4, enhancing document generation efficiency and development experience.
👉 [Click to view detailed upgrade notes](https://nextjs-nextra.netlify.app/en/upgrade)
## 🎉 Features
- ⚡️ **Next.js + TypeScript**: Efficient React framework with type safety support
- 🎨 **Tailwind CSS (v4)**: Atomic CSS for quickly building custom, responsive UI interfaces
- 🧩 **Shadcn UI**: Highly customizable UI component collection with no additional dependencies
- 📚 **Nextra v4**: Next.js-based static site generator optimized for documentation
- 🛠️ **ESLint**: Unified coding style and best practices
- ⛅ **Lightweight Design**: Streamlined project setup focused on content creation
## Prerequisites
- React 19.x
- Node >= 20.x
- Pnpm 9.x
- **VS Code plugin `dbaeumer.vscode-eslint` >= v3.0.5 (pre-release)**
## Preview
## Installation and Running
- Install dependencies
```bash
pnpm i
```
- Local development
```bash
pnpm dev
```
Then open http://localhost:8000 in your browser to access the service
## Using Shadcn UI Components
This project has integrated [Shadcn UI](https://ui.shadcn.com). Follow these steps to install/edit components and use them:
### Shadcn Structure Initialization
Execute `pnpm dlx shadcn@latest init` command to initialize the basic project structure for `Shadcn UI` (if not already initialized)
💡 Note
> This initialization command is used to create the basic project structure for `Shadcn UI`
>
> **This project has already been initialized, so there's no need to run this command again**
### Component Installation
1. Use `Shadcn CLI` to add components:
```bash
pnpm dlx shadcn@latest add
```
For example, to add the `` component, execute the following command, [see documentation](https://ui.shadcn.com/docs/components/alert#installation)
```bash
pnpm dlx shadcn@latest add alert
```
2. Using components
```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. Customizing component styles (optional)
`Shadcn UI` components typically provide popular default styles and functionality that meet most needs. If you truly need to customize, you can edit the respective component files, such as:
Open [`src/components/ui/alert.tsx`](src/components/ui/alert.tsx) to modify the styles of the `Alert` component
> Tips: In most cases, the default styles provided by `Shadcn UI` are sufficient to meet requirements without additional modifications
## 🌹 Support
If you like this project or find it useful, you can click the [`Star`](https://github.com/pdsuwwz/nextjs-nextra-starter) button in the top right to show your support. Your support is our motivation for continuous improvement, thank you! ^\_^
## 🌟 Related Projects
Here are some projects that developers and teams are using, referencing, or inspired by this project:
| Project Name | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| [CodeCrack](https://www.codecrack.cn/en) | A free and in-depth interview preparation website helping developers improve their technical skills and prepare for interviews. |
### 📢 Community Contributions
💡 If your project is also using or referencing this project, we sincerely welcome you to:
- Share your project link by submitting an [Issue](https://github.com/pdsuwwz/nextjs-nextra-starter/issues)
- Submit a Pull Request (PR) to add your project to the list
## License
[MIT](./LICENSE) License | Copyright © 2020-PRESENT [Wisdom](https://github.com/pdsuwwz)