https://github.com/pdsuwwz/nextjs-nextra-starter
⚡️ 一个 Next.js (v16) 快速启动模板, 集成 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 app-router blog i18n iconify mdx multilingual nextjs-starter nextra open-source radix react responsive shadcn ssr starter tailwindcss template ui vercel
Last synced: 4 months ago
JSON representation
⚡️ 一个 Next.js (v16) 快速启动模板, 集成 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 (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-24T03:31:31.000Z (7 months ago)
- Last Synced: 2025-12-25T16:55:48.487Z (7 months ago)
- Topics: aceternity, app-router, blog, i18n, iconify, mdx, multilingual, nextjs-starter, nextra, open-source, radix, react, responsive, shadcn, ssr, starter, tailwindcss, template, ui, vercel
- Language: TypeScript
- Homepage: https://nextra.likemashang.com/zh
- Size: 2.16 MB
- Stars: 266
- Watchers: 2
- Forks: 48
- Open Issues: 0
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcnui - Github - nextra-starter-green.vercel.app) | ★172 | (Boilerplates & Starters)
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)
- [✨ Alternative address 1](https://nextjs-nextra-starter-green.vercel.app/en)
- [✨ Alternative address 2](https://nextra.likemashang.com/en)
## 🛠️ Maintenance Commitment
🔄 Continuous update
Dependency and features are updated irregularly
🐛 Fast Response
Reply within 2 hours on average Issue
💎 Elaboration
Spend 100+ hours to perfect template details
🛡️ Stable and Reliable
Ensure that each function is fully tested
💝 **If you appreciate this effort, please show your support with a ⭐ Star.**
## 🚀 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
🎉 **Successfully running?** If you like the clean setup of this template, don’t forget to show some support!
[](https://github.com/pdsuwwz/nextjs-nextra-starter)
## 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
## 🐱 A Word from the Heart
If you've made it this far and still haven't starred the repo, then all I can say is...
**Pretty please, drop a ⭐ Star!** 🥺👉👈
Right now, my bug count is still higher than my star count 😭
## 🌟 Related Projects
Here are some projects that developers and teams are using, referencing, or inspired by this project:
| Project Name | Description |
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| [ClaudeCode101](https://www.claudecode101.com) | A Chinese tutorial site for Claude Code, featuring best practices and hands-on guides. |
| [EdgeOne Saas Starter](https://github.com/TencentEdgeOne/saas-starter) | [The fastest way to create and deploy your SaaS product with EdgeOne and Tencent Cloud](https://saas-starter-docs.edgeone.app/en) |
| [Talking Web3](https://talkingweb3.io/en) | A Web3 project accelerator dedicated to creating outstanding Web3 projects. |
| [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
## 🚨 Disclaimer
This template is provided as a technical reference solution. Users must acknowledge the following risks and obligations:
- **Technical Risks**:
Dependent frameworks (Next.js/Nextra/Tailwind CSS) carry version iteration risks. Third-party components (e.g. Shadcn UI) follow their original repositories' specifications. Environment configuration changes may cause unforeseen build exceptions
- **Usage Restrictions**:
Prohibited for use in scenarios violating open-source licenses or applicable laws/regulations. Users must conduct independent code security audits and production environment validation
- **Liability Exclusion**:
No guarantees are provided regarding:
1. Business applicability of technical solutions
2. Security assurance of dependencies
3. Official customization support
Users assume full responsibility for any direct/indirect consequences arising from usage or modifications. Continued use constitutes acceptance of these terms
## License
[MIT](./LICENSE) License | Copyright © 2020-PRESENT [Wisdom](https://github.com/pdsuwwz)