I'm getting a "Failed to compile" message in my Next.js website when I'm trying to fetch data from Contentful.

当我试图从Contentful获取数据时，我在Next.js网站中收到一条“无法编译”消息。

- error ./src\components\Carousel\Carousel.js
ReactServerComponentsError:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

   ,-[C:\Users\Sibusiso\Desktop\Test\client\src\components\Carousel\Carousel.js:1:1]
 1 | // "use client";
 2 | import React, { useState, useEffect } from 'react';
   :                           ^^^^^^^^^
 3 | import { client } from '@/client';
 4 |
 4 | const Carousel = () => {
   `----

Maybe one of these should be marked as a client entry with "use client":
  ./src\components\Carousel\Carousel.js
  ./src\app\page.js

So I included "use client" at the top of my Carousel.js file, but after that I got a Unhandled Runtime Error TypeError: Expected parameter accessToken

因此，我在Carousel.js文件的顶部添加了“Use Client”，但在那之后，我得到了一个未处理的运行时错误TypeError：预期参数accesToken

"use client";
import React, { useState, useEffect } from 'react';
import { client } from '@/client';

const Carousel = () => {

  const [isCarouselLoading, setIsCarouselLoading] = useState(false);
  const [carouselSlides, setCarouselSlides] = useState([]);

  useEffect(() => {
    const getCarouselSlides = async () => {
      try {
        const res = await client.getEntries({ type: "luminCarousel"});
        // const responseData = response.items;
        console.log(res)
      } catch (error) {
        console.log(error);
      }
    };
    getCarouselSlides();
  }, []);

Unhandled Runtime Error
TypeError: Expected parameter accessToken

Source
src\client.js (5:22) @ contentful

  3 | console.log(process.env);
  4 | 
> 5 | export const client = contentful.createClient({
    |                    ^
  6 | space: process.env.CONTENTFUL_SPACE_ID,
  7 | environment: 'master', // defaults to 'master' if not set
  8 | accessToken: process.env.CONTENTFUL_ACCESS_TOKEN

The accessToken and space ID are in my .env.development file (I tried a plain .env file and there was no change).
How do I solve this problem?

AccesToken和空间ID在我的.env.Development文件中(我尝试了一个普通的.env文件，没有任何更改)。我该如何解决这个问题呢？

I also had this same issue. If I call API from getStaticProps, Its working fine, but not when I call from useEffect.

我也有同样的问题。如果我从getStaticProps调用API，它工作得很好，但当我从useEffect调用时就不行了。

solution is to copy env file variable in next.config.js file, that's how contentful createClient method will access env file in client side.

解决方案是将env文件变量复制到next.config.js文件中，这就是内容丰富的createClient方法在客户端访问环境文件的方式。

this is what my next.config.js looks like

这就是我的next.js.js的样子

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    CONTENTFUL_SPACE_ID:process.env.CONTENTFUL_SPACE_ID,
    CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN,
    CONTENTFUL_PREVIEW_ACCESS_TOKEN: process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN,
    CONTENTFUL_PREVIEW_SECRET: process.env.CONTENTFUL_PREVIEW_SECRET,
    CONTENTFUL_REVALIDATE_SECRET: process.env.CONTENTFUL_REVALIDATE_SECRET,
    CONTENTFUL_MANAGEMENT_TOKEN: process.env.CONTENTFUL_MANAGEMENT_TOKEN,
  },
};

module.exports = nextConfig;

I had the same issue and found the solution within Next.js docs.

我也遇到了同样的问题，并在Next.js文档中找到了解决方案。

Next Js docs on env variables

Next Js docs on env variables

In order to make the value of an environment variable accessible in the browser, Next.js can "inline" a value, at build time, into the js bundle that is delivered to the client, replacing all references to process.env.[variable] with a hard-coded value. To tell it to do this, you just have to prefix the variable with NEXT_PUBLIC_.

为了使环境变量的值可以在浏览器中访问，Next.js可以在构建时将一个值“内联”到交付给客户端的js包中，用硬编码的值替换对cess.env.[Variable]的所有引用。要告诉它这样做，您只需在变量前面加上NEXT_PUBLIC_。

For example: NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

例如：NEXT_PUBLIC_ANALTICS_ID=abcDefghijk

Once you do this you just call them with process.env.NEXT_PUBLIC_ANALYTICS_ID

完成此操作后，只需使用Process.env.NEXT_PUBLIC_ANALTICS_ID调用它们