Next.js 14.1.0组件TestMe.tsx打包为可复用NPM包配置求助

先明确你之前配置的问题 #

1. 错误地将组件自身路径加入externals，这会导致Webpack跳过组件打包，无法生成可用的库文件
2. 仅在客户端（!isServer）配置library相关项，不符合Next.js的SSR/SSG渲染逻辑
3. experimental.externalDir用于导入外部目录文件，和组件库打包无关，属于无效配置

正确配置步骤 #

1. 调整package.json核心配置

NPM包需要明确入口、依赖声明，避免重复打包Next.js核心模块：

{
  "name": "your-testme-package", // 替换为你的包名
  "version": "1.0.0",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "peerDependencies": {
    "next": "^14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "build": "tsc", // 用TypeScript编译组件（推荐）
    "dev": "next dev" // 开发时预览组件
  },
  "files": ["dist"] // 发布时仅包含dist目录
}

2. 配置tsconfig.json（TypeScript项目必选）

确保编译输出正确的组件文件和类型声明：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "declaration": true,
    "declarationDir": "./dist",
    "outDir": "./dist",
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false
  },
  "include": ["src/components/**/*", "src/index.ts"],
  "exclude": ["node_modules", ".next", "out"]
}

3. 优化next.config.mjs（开发预览+打包兼容）

如果需要在Next.js项目中开发预览组件，同时兼容组件库打包：

const nextConfig = {
  experimental: {
    outputFileTracing: false, // 减少不必要的打包文件
  },
  webpack(config) {
    // 将Next.js、React等核心依赖设为外部包，由宿主项目提供
    config.externals.push({
      'next': 'next',
      'react': 'react',
      'react-dom': 'react-dom',
    });

    // 配置库输出格式，支持多种导入方式
    config.output.library = {
      name: 'TestMe',
      type: 'umd',
    };

    return config;
  },
};

export default nextConfig;

4. 组件导出与入口文件

在src/index.ts中统一导出组件，作为包的入口：

export { default as TestMe } from './components/TestMe';
export type { TestMeProps } from './components/TestMe'; // 导出组件类型（如果有）

5. 打包与发布

• 运行npm run build生成dist目录
• 测试：在本地另一个Next.js项目中，通过npm install ../path-to-your-package安装并导入使用
• 发布：执行npm publish（需先登录NPM账号）

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