如何在next.js应用程序的窗口对象上访问google api脚本?

我正在尝试将Google api与next.js应用程序一起使用。我正在阅读文档,实现Google api的next.js建议是使用next.js Head组件。我加载了脚本,但似乎无法访问gapi属性...

export default () => (
  <div>
    <Head>
      <link href="/static/styles.css" rel="stylesheet" />
      <script
        src="https://apis.google.com/js/platform.js?onload=init"
        async
        defer
      ></script>
    </Head>
    <Login />
  </div>
);

我的Googleclient文件开头

const Googleclient = ({api}) => {
...
}

我使用了一个Login组件,将Googleclient文件初始化为

const Login = () => {
    useEffect(()=> {
        Googleclient(window.gapi)
    },[])
...
}

当我在console.log窗口中时,window对象上存在gapi属性,但是当我调用window.gapi时,出现以下错误 ->类型“ Window&typeof globalThis”上不存在属性“ gapi”。 我搜索了该错误,但没有看到有关如何解决该错误的任何帖子。

wuchun198799 回答:如何在next.js应用程序的窗口对象上访问google api脚本?

原来,这是其他帖子的重复错误。我需要安装@types/gapi@types/gapi.auth2软件包。

如果安装后者,则不需要前者。

npm install @types/gapi.auth2 -D
本文链接:https://www.f2er.com/3135893.html

大家都在问