Next.js添加'use client'后遇TypeError: Expected parameter accessToken求助

第一个问题：编译失败（ReactServerComponentsError） #

你遇到的编译错误是因为使用useEffect的组件默认是Server Component，但useEffect仅能在Client Component中运行。

• 解决方法：在Carousel.js文件最顶部添加"use client";声明，将组件标记为客户端组件：

"use client";
import React, { useState, useEffect } from 'react';
// 其他导入和代码...

第二个问题：TypeError: Expected parameter accessToken #

添加客户端声明后出现的令牌错误，核心是环境变量未被客户端组件正确读取，按以下步骤排查解决：

1. 环境变量必须加NEXT_PUBLIC_前缀 #

Next.js中，客户端组件只能访问以NEXT_PUBLIC_开头的环境变量，修改你的.env.development或.env文件：

NEXT_PUBLIC_CONTENTFUL_SPACE_ID=你的Contentful空间ID
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=你的Contentful访问令牌

2. 检查.env文件位置 #

确保.env文件放在项目根目录（和src、next.config.js同级），不要放在src文件夹内。

3. 重启开发服务器 #

修改.env文件后必须重启next dev命令，否则新的环境变量不会加载生效。

4. 更新client.js中的变量引用 #

同步修改client.js里的环境变量名称：

import contentful from 'contentful';

export const client = contentful.createClient({
  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
  environment: 'master',
  accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN
});

5. 验证变量是否加载 #

可以在client.js中临时打印环境变量，确认是否正确读取：

console.log('Space ID:', process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID);
console.log('Access Token:', process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN);

如果打印结果是undefined，检查变量名拼写是否一致，有没有多余空格或引号。

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