nextjs 创建项目

create-next-app 创建 nextjs 项目

npx create-next-app@latest ssr-next
# ts项目
npx create-next-app@latest --typescript  ssr-next
pnpm dev # 运行 next dev，以开发模式启动 Next.js
pnpm build # 运行 next build，以构建用于生产环境的应用程序
pnpm start # 运行 next start，以启动 Next.js 生产环境服务器
pnpm lint # 运行 next lint，以设置 Next.js 的内置 ESLint 配置

Eslint js 代码规范校验
Stylelint css 代码格式化
Prettier 代码格式化

tailwindcss

https://nextjs.org/docs/app/building-your-application/styling/tailwind-css#installing-tailwind

pnpm add tailwindcss postcss autoprefixer -D
npx tailwindcss init -p

swc

https://swc.rs
swc 中文 https://swc.nodejs.cn
SWC is 20x faster than Babel on a single thread and 70x faster on four cores.
SWC在单线程上比Babel快20倍，在四核上快70倍
新一代的编译工具，基于 rust，替换 babel；
esbuild，替换 webpack，rollup 等构建工具。
凡是能用 rust 重写的前端工具就用 rust 重写，通过 rust 实现的 babel：swc，一个将 ES6 转化为 ES5 的工具

babel 的插件系统被 swc 整合成了 jsc.parser 内的配置
jsc.minify 用于配置压缩相关的规则

nextjs web3

https://web3.ant.design/zh-CN/guide/quick-start

pnpm add antd @ant-design/web3 @ant-design/web3-icons
pnpm add @ant-design/web3-wagmi wagmi

Server Error
Error: createContext only works in Client Components. Add the “use client” directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
This error happened while generating the page. Any console logs will be displayed in the terminal window.链接
原因：
Next.js 在加载 node_modules 下面的依赖包时没有走相关的编译逻辑。
需要手动在 Next.js 的配置文件 next.config.js 中添加 transpilePackages
https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages

Add the “use client” directive at the top of the file to use it

在Next.js中使用 @ant-design/web3 报错
createContext only works in Client Components. Add the “use client” directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
解决方法是加上”use client”标签，在import的上方加入

"use client"
import Image from "next/image";
import { Address } from '@ant-design/web3';

要导入的 Address 正在使用客户端钩子 createContext。 需要在文件顶部添加“use client”，意味着该页面成为客户端组件，而不再是服务器组件。

Support for defaultProps will be removed from function components

Warning: SVGComponent: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
原因