页面文件顶部导入的crypto是否会进入Next.js客户端打包？

会被包含进客户端打包，原因如下：

Next.js 对 pages 目录下的文件会同时构建服务端和客户端两个版本。你在页面文件顶部的import { crypto } from 'crypto'属于模块级别的导入，Webpack 在分析依赖时，会把这个导入视为整个文件的依赖项——即使你只在getServerSideProps（仅服务端执行的函数）里使用，客户端打包过程中依然会识别到这个导入，进而尝试为浏览器环境添加crypto-browserify polyfill。

解决办法 #

1. 将导入移至服务端函数内部

把crypto的导入放到getServerSideProps函数里，这样只有服务端执行该函数时才会加载依赖，客户端打包不会包含这个模块：

// /pages/[myPage].tsx

export const getServerSideProps: GetServerSideProps<MyProps> = async (context) => {
  const { crypto } = await import('crypto');
  // 在这里使用 crypto
}

2. 配置 Webpack 排除客户端的 crypto 依赖

在next.config.js中添加配置，让客户端打包忽略crypto模块（注意：如果客户端代码不小心用到crypto会直接报错，需确保客户端无相关调用）：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.externals.push('crypto');
    }
    return config;
  },
};

内容的提问来源于stack exchange，提问作者Michael