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

[Jtyczc]

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

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'

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

[dawnven]

不知 antdesign pro 能不能满足你

[cheerxl]

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

[hlwjia]

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

[duan602728596]

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]

估计是 transpile 的问题。

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