新手问下，请问 nextjs + antd 脚手架有没有手把手教学啊？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 418 天前的主题，其中的信息可能已经有所发展或是发生改变。

（腾讯云最新优惠活动来了：云产品限时1折，云服务器低至88元/年，点击这里立即抢购：9i0i.cn/qcloud，更有2860元代金券免费领取，付款直接抵现金用，点击这里立即领取：9i0i.cn/qcloudquan）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

纯新手，有个报错大佬们帮忙看下：

error - /Users/victor/IdeaProjects/next-elite-admin-web/node_modules/antd/es/form/Form.js:9
import classNames from 'classnames';
^^^^^^

SyntaxError: Cannot use import statement outside a module

应该是这行代码报错了： import { FilterValue, SorterResult, TablePaginationConfig, } from 'antd/es/table/interface'

我上网查了下，貌似从零建立一个项目好像很多搭配，没有脚手架直接让我业务代码开发吗

antd

import

脚手架

form

5 条回复 ? 2023-03-20 13:09:49 +08:00

dawnven

2023-03-20 10:34:52 +08:00

不知 antdesign pro 能不能满足你

cheerxl

2023-03-20 11:24:51 +08:00

@dawnven antd pro 都和 umi 绑定了，肯定不合适

hlwjia

2023-03-20 11:39:36 +08:00

https://github.com/search?q=nextjs+antd&ref=opensearch

duan602728596

2023-03-20 13:00:44 +08:00

nextjs 会将 node_modules 中的模块使用 require 加载，import 出现在 commonjs 中，需要将 antd 编译打包
修改 next.config.js 文件如下：

module.exports = {
webpack(config, options) {
/* 将 antd 打包到服务端生成的文件中 */
if (options.isServer) {
const endIndex = config.externals.length - 1;
const externalsFunc = config.externals[endIndex];

config.externals[endIndex] = function(ctx, callback) {
if (/(antd|rc-|@ant-design)/i.test(ctx.request)) {
return callback();
}

return externalsFunc(ctx, callback);
};
}
};

kongkx

2023-03-20 13:09:49 +08:00 via iPhone

估计是 transpile 的问题。

https://nextjs.org/blog/next-13-1#built-in-module-transpilation-stable