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 了。

js 复制代码
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,还是上面的步骤,代码如下

js 复制代码
const nextConfig = {  
reactStrictMode: true,  
transpilePackages: ['antd', '@ant-design/icons'],  
};  
  
module.exports = nextConfig;

坑二: antd 和 tailwind 样式冲突

在我的页面中放了一个 antd 的 Button 按钮

html 复制代码
<Button type='primary'>Button</Button>

但是这个按钮只有当我 hover 的时候才能看到

最后无奈,只好先去掉了 tailwind ☹

指南:安装 @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的属性,

再根据介绍中跳转至定制主题,仔细阅读会惊喜的发现以下说明:

也就是说,只要我们通过修改算法就可以实现动态主题切换了,好了,那我们开始实操。

  1. 编写 useTheme.ts
ts 复制代码
import { useEffect, useState } from 'react';

const useTheme = (): [string, (value: string) => void] => {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const storeTheme = window.localStorage.getItem('theme');
    if (storeTheme) setTheme(storeTheme);
  }, []);

  const setValue = (value: string) => {
    setTheme(value);
    window.localStorage.setItem('theme', value);
  };

  return [theme, setValue];
};

export default useTheme;
  1. 使用 useTheme 和 ConfigProvider
tsx 复制代码
import { Layout, Menu, ConfigProvider, theme } from 'antd';  
const { Content, Sider } = Layout;  
  
const BaseLayout = ({ children }: any) => {  
    const router = useRouter();  
    const cleanedPath = router.asPath.split(/[\?\#]/)[0];  
    const [collapsed, setCollapsed] = useState(false);  
    const [value, setValue] = useTheme();  
  
    // 收起的宽度  
    const collapsedWidth = 64;  

    const siderWidth = 208;  
  
return (  
    <ConfigProvider  
        theme={{  
        algorithm:  
        value === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm,  
        }}  
    >  
        <Layout style={{ minHeight: '100vh' }}>  

        </Layout>  
    </ConfigProvider>  
    );  
};  
  
export default BaseLayout;

剩下的就是写个按钮去改 value 的值即可,听说你想看看源码,好,上链接:

github.com/lijunping36...

感谢老铁的三连🤞

相关推荐
初九之潜龙勿用2 分钟前
文心一言4.5开源模型测评:ERNIE-4.5-0.3B超轻量模型部署指南
开源·dubbo·文心一言
NetX行者7 分钟前
FastMCP:用于构建MCP服务器的开源Python框架
服务器·python·开源
爱喝水的小周12 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021115 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅19 分钟前
介绍electron
前端·javascript·electron
周胡杰21 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691322 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑24 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7739 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人43 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架