# nextjs
**Repository Path**: langwen/nextjs
## Basic Information
- **Project Name**: nextjs
- **Description**: react nextjs blog ssr
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://www.lulongwen.com
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-01-28
- **Last Updated**: 2025-02-23
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# nextjs
```bash
pnpm add antd @ant-design/nextjs-registry
git remote add origin https://gitee.com/langwen/nextjs.git
```
## 技术栈
基于 React18、NextJS14、 Ant-Design、TypeScript 的前台解决方案，目标是为开发中大型项目提供开箱即用的解决方案
- [NextJS](https://nextjs.org/docs)是一个用于构建全栈 Web 应用程序的 React 框架
- [Ant Design](https://ant-design.antgroup.com/components/overview-cn?from=msidevs.net) UI组件库
- [Tailwindcss](https://www.tailwindcss.cn/docs/installation) 原子化 css 组件库（可选择使用，但是强烈推荐使用）
- [ZUSTAND](https://awesomedevin.github.io/zustand-vue/docs/introduce/start/zustand) 状态管理
- [ahooks](https://ahooks.js.org/zh-CN)一套高质量可靠的 React Hooks 库
- next/image 组件直接支持 svg 直接引用不用二次封装
- **nextjs** 世界上最流行的前端解决方案之一
- **antd5.0** 使用人数最多，高质量的开源组件库
- **chart.js** 轻量可扩展的可视化图表库
- lenis 代替默认的滚动，网页平滑滚动
- **jsonwebtoken** 用户鉴权库
- **xijs** 面向业务场景的强大的js工具库
- **react-moveable** 强大的自由拖拽库
- **form-engine** 自研表单引擎
- **doc-editor** 自研文档编辑引擎
- **simple-mind-map** 开箱即用的思维导图组件
- **yjs** 基于CRDT算法的协同框架
- **通义千问SDK** 提供AI能力支持
## Getting Started
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## AppRouter
使用了 App Router, 并使用 antd 作为页面组件库
App Router 当前不支持直接使用 `.` 引入的子组件，如 ``、`` 等，需要从路径引入这些子组件来避免错误
https://juejin.cn/post/7194410416879960125
## antd
```bash
pnpm add antd @ant-design/nextjs-registry
```
### app/layout.tsx
将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况
```bash
import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';
const RootLayout = ({ children }: React.PropsWithChildren) => (
{children}
);
export default RootLayout;
```
```json
{
// 引擎锁定 🔐
"engines": {
"node": ">=18.0.0",
"pnpm": ">=8.0.0"
}
}
```
zod 一个以 TypeScript 为首的模式声明和验证库 ，弥补了 TypeScript 无法在运行时进行校验的问题
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.