next/dynamic配置suspense报Invalid suspense option usage错误怎么解决

报错原因 #

这个报错的触发通常有两个核心原因：

• 你当前使用的是Next.js Pages Router架构，该架构原生不支持next/dynamic的suspense配置项
• 你使用的是Next.js 13+ App Router，但未在对应文件顶部声明客户端组件指令，或Next.js版本低于13.4稳定版

对应解决方法 #

场景1：使用Pages Router架构

直接移除suspense配置，使用dynamic自带的fallback参数实现加载态即可，代码示例：

const DynamicLazyComponent = dynamic(() => import('../components/loader'), {
    fallback: 'loading',
})

function MyApp({ Component, pageProps }) {
    return (
        <>
            <DynamicLazyComponent />
            ...some code here...
        </>
    )
}

场景2：使用App Router架构

首先升级Next.js到13.4+稳定版，之后在用到动态导入和Suspense的文件最顶部添加'use client'指令，代码示例：

'use client'
import { Suspense } from 'react'
import dynamic from 'next/dynamic'

const DynamicLazyComponent = dynamic(() => import('../components/loader'), {
    suspense: true,
})

function MyApp({ Component, pageProps }) {
    return (
        <Suspense fallback={`loading`}>
            <DynamicLazyComponent />
            ...some code here...
        </Suspense>
    )
}

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