如何在Next.js中使用pusher-js实现实时通知并解决import报错问题

报错原因 #

@pusher/push-notifications-web 包为纯ES模块格式，Next.js默认不会对node_modules下的第三方依赖做ES模块转译，服务端渲染（SSR）阶段无法识别ES模块的export语法，就会抛出该错误。

解决方案1：修复现有Pusher包的调用问题 #

步骤1：配置Next.js转译目标依赖 #

修改项目根目录的next.config.js文件，添加转译配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 加入需要转译的ES模块包
  transpilePackages: ["@pusher/push-notifications-web"],
}

module.exports = nextConfig

如果是Next.js 13以下版本，使用next-transpile-modules插件完成转译配置即可。

步骤2：仅在客户端侧导入包 #

该包仅支持浏览器环境运行，需要避免SSR阶段加载，有两种实现方式：

方式A：使用next/dynamic动态导入关闭SSR

import dynamic from 'next/dynamic'

// 关闭SSR动态导入包
const PusherPushNotifications = dynamic(
  () => import("@pusher/push-notifications-web"),
  { ssr: false }
)

// 后续在组件逻辑中正常调用即可

方式B：在useEffect中异步导入

如果是Pages Router，或者需要在初始化时做更多逻辑处理：

import { useEffect } from 'react'

useEffect(() => {
  const initPusherNotifications = async () => {
    const PusherPushNotifications = (await import("@pusher/push-notifications-web")).default
    // 初始化实例
    const beamsClient = new PusherPushNotifications.Client({
      instanceId: '你的Pusher实例ID',
    })
    await beamsClient.start()
    // 后续绑定用户、订阅通知等逻辑
  }
  initPusherNotifications()
}, [])

如果使用App Router，需要在组件顶部添加'use client'指令标记为客户端组件。

解决方案2：更适配Next.js的实时通知替代方案 #

如果不需要依赖Pusher的Beams推送服务，可以选择以下适配性更高的实现：

• pusher-js官方包：Pusher官方通用SDK，同时支持服务端和客户端环境，不需要额外转译配置，既可实现实时通知，也支持双向通信等更复杂的实时场景。
• Server-Sent Events (SSE)：Next.js原生支持SSE，仅需在API路由中编写推送逻辑，无需引入第三方依赖，适合仅需要服务端单向推送通知的轻量场景。
• Socket.io：生态成熟，有大量Next.js适配实践，支持离线消息、房间管理等能力，适合复杂的实时交互场景。

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