nextjs 集成 antd 踩坑&指南
前言
最近在重构 Open-Job 的前端项目，打算使用 Nextjs + Antd 实现，这样做的好处就是容易升级，而且也不用管路由什么的，废话不多说，我们直接进入主题。
使用的版本如下：
- Nextjs 版本：14.0.3
- Antd 版本：5.11.5
坑一：项目引入 Antd 组件之后启动报错
项目初始化完之后我在 index.tsx 页面引入了 antd 的 Layout 相关组件（注意，这时不管你在页面中引入 antd 的哪个组件启动项目都会报错的），启动项目之后报错信息如下：
SyntaxError: Cannot use import statement outside a module
没错，就是这个报错它盘了我一晚上，直到第二天才找到答案💀🤮
解决方法就是在 next.config.js 中配置 transpilePackages，就像下面这样就 OK 了。
const nextConfig = {
reactStrictMode: true,
transpilePackages: ['antd']
};
module.exports = nextConfig;
你可能会问 transpilePackages 是个啥，问的好，看 这里 就好，这是它的官方文档。
Next.js can automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (node_modules). This replaces the next-transpile-modules package.
翻译过来就是说：
Next.js 可以从本地软件包（如 monorepos）或外部依赖（node_modules）自动转译和捆绑依赖。这将取代 next-transpile-modules 软件包。
注意是 v13.0.0 才增加的，也就是小于这个版本的需要添加 next-transpile-modules 依赖才能实现上述的效果。
如果后面你还集成了 @ant-design/icons，还是上面的步骤，代码如下
const nextConfig = {
reactStrictMode: true,
transpilePackages: ['antd', '@ant-design/icons'],
};
module.exports = nextConfig;
坑二： antd 和 tailwind 样式冲突
在我的页面中放了一个 antd 的 Button 按钮
<Button type='primary'>Button</Button>
但是这个按钮只有当我 hover 的时候才能看到
最后无奈，只好先去掉了 tailwind ☹
更新于 2024-02-27
antd 和 tailwind 可以同时存在，需要禁用 tailwind 的 Preflight，如何禁用的配置可参考官方文档：www.tailwindcss.cn/docs/prefli…
或者直接用我的模板创建也可以，下面有我的模板链接，我们模板也添加了 tailwind css。
指南：安装 @ant-design/cssinjs
可能有人会问为什么需要安装这个？
来，上答案
从 antd 的 官方文档 得知，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。那么你需要按照它的文档一步一步来就行，由于我是用的 Pages Router，所以这里的截图是这个，你要根据你的实际情况操作。
注意它说的版本一致（Tips），我这里需要安装的版本是 @ant-design/cssinjs": "^1.18.0
指南：实现动态主题
先来张效果图瞄一眼
老规矩，我们先看官方文档有没有
在 Antd 5.x版本中，如果想实现动态主题切换（默认主题切换与暗色主题），有一种更加简单的方案，就是借助于 ConfigProvider。 参考ConfigProvider的API，会发现其中有一个theme的属性，
再根据介绍中跳转至定制主题，仔细阅读会惊喜的发现以下说明：
也就是说，只要我们通过修改算法就可以实现动态主题切换了，代码实操我们放在了下一节，防止篇幅太长，划拉的太累🤦♂️。
听说你想看看源码，安排，上链接：
感谢老铁的三连🤞