如何在没有动态导入的情况下将commons js拆分到next？

在没有动态导入的情况下，将CommonJS拆分到Next.js可以通过以下步骤实现：

1. 确保你的Next.js项目已经安装了相关依赖，包括webpack和babel等。
2. 创建一个新的Next.js页面或组件，用于加载和使用CommonJS模块。
3. 将需要拆分的CommonJS模块复制到Next.js项目中的一个目录下，例如lib目录。
4. 在Next.js页面或组件中，使用require语法引入需要拆分的CommonJS模块。例如：

const myModule = require('../lib/myModule');

1. 在Next.js页面或组件中，使用CommonJS模块提供的功能。例如：

myModule.doSomething();

1. 在Next.js项目的构建过程中，webpack会将CommonJS模块打包到一个单独的文件中。
2. 在Next.js项目的构建配置文件（例如next.config.js）中，可以使用webpack的代码分割功能来进一步优化拆分的CommonJS模块。例如：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.optimization.splitChunks.cacheGroups.commons = {
        name: 'commons',
        chunks: 'all',
        minChunks: 2,
      };
    }
    return config;
  },
};

上述配置将会把CommonJS模块拆分到一个名为commons的文件中。

1. 在Next.js项目中，可以使用拆分后的CommonJS模块，通过在页面或组件中引入拆分后的文件。例如：

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../lib/commons'));

export default function MyPage() {
  return <MyComponent />;
}

这样，拆分后的CommonJS模块将会在需要时动态加载。

总结起来，通过将CommonJS模块复制到Next.js项目中，并在页面或组件中引入和使用，再结合webpack的代码分割功能，可以在没有动态导入的情况下将CommonJS拆分到Next.js中。