Next.js 15使用next/dynamic动态加载组件报错求助

问题分析 #

你遇到的错误核心原因有两个：

1. 错误的导入方式：Next.js的dynamic是默认导出，而非命名导出，使用import { dynamic } from 'next/dynamic'会获取到undefined，调用时自然触发is not a function错误。
2. 动态组件定义位置错误：dynamic必须在组件函数外部声明，不能在组件内部（比如NewBlog函数体内）定义。

另外你存在重复导入BlogForm的问题，会导致变量名冲突，也需要修正。

解决方案 #

按照以下步骤修改代码：

1. 改为默认导入dynamic
2. 将动态组件的定义移到组件函数外部
3. 移除重复的静态导入

修正后的完整代码：

'use client';
import dynamic from 'next/dynamic';
import { useFormState } from 'react-dom';
import { postAction } from '@/lib/actions';

// 在组件外部声明动态导入的组件
const BlogForm = dynamic(
  () => import('@/components/blogs/blog-form/blog-form'),
  { ssr: false }
);

const NewBlog = () => {
    const [state, formAction] = useFormState(postAction, { message: null });
    
    return (
        <>
            <BlogForm />
        </>
    )
}
export default NewBlog;

额外说明 #

• 如果你已经使用'use client'指令，当前组件已默认是客户端渲染模式，若目标BlogForm组件没有特殊的SSR限制，可以考虑移除{ ssr: false }配置，按需调整即可。
• Next.js 15（App Router）中dynamic的用法与之前版本一致，核心是保持默认导出的导入方式，且动态组件需在组件外部定义。

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