NextJS（React）-错误：无效的挂钩调用（useState）

Question

我正在使用NextJS进行服务器端渲染，并且正在尝试在正在抛出的组件内部使用useState挂钩：

错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我的代码：

import { useState } from 'react';

const Banner = ({ movies }) => {
    const [movie, setMovie] = useState(movies);

    return (
        <header>
            <h1> Banner </h1>
        </header>
    )
}

export default Banner;

目录树

/components/Banner.js
/pages

当我使用useEffect（）时遇到相同的错误：

从'react'导入React，{useEffect}