如何在Next.js中动态导入非组件类node_modules依赖？

下面提供几种合规且易维护的解决方案，避开你提到的那些糟糕实践：

方案一：顶层条件导入（兼容Next.js全版本） #

直接在文件顶层做环境判断，只在客户端加载库，同时通过类型声明解决类型访问问题：

// 先补充类型声明（如果库没有自带TS类型）
declare module 'crunker' {
  export default class Crunker {
    merge(audioBuffers: AudioBuffer[]): Promise<AudioBuffer>;
    export(audio: AudioBuffer, type: string): Promise<string>;
    // 根据库的实际方法补充其他类型
  }
}

// 顶层条件加载
let Crunker: typeof import('crunker').default | undefined;

if (typeof window !== 'undefined') {
  Crunker = require('crunker').default;
}

// 在组件里使用
export default function AudioTool() {
  const handleMerge = async () => {
    if (!Crunker) return; // 兜底判断，避免服务端渲染报错
    const crunker = new Crunker();
    // 执行音频操作，比如合并
    const mergedBuffer = await crunker.merge([/* 你的音频缓冲区数组 */]);
  };

  return <button onClick={handleMerge}>合并音频</button>;
}

这种方式把导入逻辑集中在顶层，可读性强，也不会增加额外的effect复杂度。

方案二：封装成自定义Hook（复用性强） #

把库的加载逻辑封装到Hook里，组件只需调用Hook即可，同时统一处理类型：

// hooks/useCrunker.ts
import { useState, useEffect } from 'react';

// 类型声明
declare module 'crunker' {
  export default class Crunker {
    merge(audioBuffers: AudioBuffer[]): Promise<AudioBuffer>;
    export(audio: AudioBuffer, type: string): Promise<string>;
  }
}

export function useCrunker() {
  const [CrunkerClass, setCrunkerClass] = useState<typeof import('crunker').default | null>(null);

  useEffect(() => {
    // 仅在客户端加载库
    const loadLibrary = async () => {
      const module = await import('crunker');
      setCrunkerClass(module.default);
    };
    loadLibrary();
  }, []);

  return CrunkerClass;
}

// 在组件中使用
import { useCrunker } from '@/hooks/useCrunker';

export default function AudioEditor() {
  const Crunker = useCrunker();

  const handleExport = async () => {
    if (!Crunker) return;
    const crunker = new Crunker();
    // 执行导出操作
    const audioUrl = await crunker.export(/* 音频数据 */, 'audio/wav');
  };

  return <button onClick={handleExport} disabled={!Crunker}>导出音频</button>;
}

这个方案把加载逻辑隔离，组件代码更干净，还能在多个组件中复用Hook。

方案三：Next.js 13+ App Router 用'use client'指令 #

如果你的项目用的是App Router，直接在组件顶部加上'use client'标记，就能像普通React项目一样直接导入客户端库：

'use client';

import Crunker from 'crunker';

export default function ClientAudioComponent() {
  const handleProcess = async () => {
    const crunker = new Crunker();
    // 这里直接调用Crunker的方法即可
  };

  return <button onClick={handleProcess}>处理音频</button>;
}

'use client'会让组件完全在客户端渲染，服务端不会执行这段代码，自然不会触发浏览器API不存在的错误，这是Next.js 13+最推荐的客户端组件写法。

以上三种方案都能解决你的问题，且符合代码整洁性要求，不需要采用那些糟糕的实践。

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