【Next.js踩坑记】解决TypeError: createContext is not a function错误

在Next.js App Router中使用认证组件时遇到的常见问题及解决方案

问题现象

在使用Next.js 14+的App Router开发应用时，当我们在登录页面中使用认证组件（如Kinde Auth）时，可能会遇到这样的错误：

TypeError: createContext is not a function

错误通常出现在页面组件中，例如：

import { LoginLink } from "@kinde-oss/kinde-auth-nextjs";
import { Button } from "@/components/ui/button";

export default function LoginPage() {
    return (
        <main className="h-dvh flex flex-col items-center gap6 text-4xl p-4">
            <h1>Repair Shop</h1>
            <Button asChild>
                <LoginLink>Sign In</LoginLink>
            </Button>
        </main>
    )
}

原因分析

Next.js中的两种组件类型

在Next.js的App Router架构中，存在两种类型的组件：

Server Components (默认):
- 在服务器上渲染，将HTML直接发送给客户端
- 不包含JavaScript代码，减少客户端下载的包大小
- 不能使用：React hooks、浏览器API、事件处理器和React Context API
Client Components:
- 在客户端（浏览器）中执行
- 支持完整的React功能，包括交互功能
- 可以使用React hooks、浏览器API和Context等

错误根本原因

出现createContext is not a function错误是因为：

/app目录下的所有组件默认都是Server Components
认证库（如Kinde Auth）内部使用了React Context API
React Context只能在Client Components中使用

解决方案

解决这个问题非常简单，只需在文件顶部添加'use client'指令：

'use client'
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs";
import { Button } from "@/components/ui/button";

export default function LoginPage() {
    return (
        <main className="h-dvh flex flex-col items-center gap6 text-4xl p-4">
            <h1>Repair Shop</h1>
            <Button asChild>
                <LoginLink>Sign In</LoginLink>
            </Button>
        </main>
    )
}

解决原理

添加'use client'指令的作用：

显式告诉Next.js这个组件是Client Component
Next.js会在服务器预渲染这个组件，然后在客户端"激活"它（称为"水合"）
允许组件使用完整的React功能集，包括Context API

深入理解：Server Components与Client Components

Server Components的优势

更小的包体积：不发送React库和组件代码到客户端
更快的初始加载：直接返回HTML，无需等待JavaScript加载和执行
更好的SEO：搜索引擎可以直接看到完整内容
直接访问服务器资源：可以直接查询数据库等

Client Components的必要性

用户交互：处理点击、输入等事件
浏览器API：访问localStorage、window等对象
React生命周期：使用useState、useEffect等hooks
状态管理：使用Context API和其他状态管理工具

使用Client Components的成本

增加客户端JavaScript包大小
增加"水合"（hydration）时间
可能导致页面初始渲染后的布局偏移（CLS）

最佳实践

1. 将Client Components限制在必要的范围内

不要在整个页面添加'use client'，而是尝试将客户端逻辑隔离到专门的组件中：

// page.tsx (Server Component)
import LoginButton from './LoginButton';

export default function LoginPage() {
    return (
        <main className="h-dvh flex flex-col items-center gap6 text-4xl p-4">
            <h1>Repair Shop</h1>
            <LoginButton /> {/* 客户端组件封装 */}
        </main>
    );
}

// LoginButton.tsx
'use client'
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs";
import { Button } from "@/components/ui/button";

export default function LoginButton() {
    return (
        <Button asChild>
            <LoginLink>Sign In</LoginLink>
        </Button>
    );
}

2. 客户端组件边界下移

客户端组件应尽量在组件树的"叶子"部分，避免大量组件被迫成为客户端组件。

3. 利用组件互操作性

Server Components可以导入和渲染Client Components，但反过来不行。利用这一点来优化应用。

常见问题与解决方案

1. 如何判断是否需要`'use client'`？

如果组件使用了以下任何一项，就需要'use client'：

React hooks (useState, useEffect, useContext等)
事件处理器 (onClick, onChange等)
浏览器API (window, document, localStorage等)
使用Context API的第三方库或组件

2. 已添加`'use client'`但仍有错误

可能原因：

Node_modules缓存问题，尝试：rm -rf ./node_modules/.cache
Next.js缓存，尝试：rm -rf .next然后重启开发服务器

3. 性能优化建议

尽量使用Server Components
通过自定义hooks将状态逻辑独立出来
考虑使用React Suspense和Streaming

总结

Next.js的Server Components是一项强大功能，可以显著提升应用性能。但在使用需要React Context等客户端功能的组件（如认证组件）时，必须使用'use client'指令将其标记为Client Component。

理解Server Components和Client Components的区别，合理规划组件架构，可以帮助我们构建既高性能又功能丰富的Next.js应用。

希望这篇文章能帮助大家解决类似问题，也欢迎在评论区分享你的Next.js开发经验！

作者：前端开发者

本文首发于掘金，转载请注明出处

【Next.js踩坑记】解决TypeError: createContext is not a function错误