如何通过 npm install 使用 google 日历 api for JavaScript?或者是否可以在 Nextjs 的浏览器中为 nodejs 使用 google 日历 api?
How to use google calendar api for JavaScript with npm install?? Or is it possible to use google calendar api for nodejs in browser in Nextjs?
我想使用 google 日历 api 作为 Next.js 中的库而不使用 _document.tsx。在那种情况下,我想出了两种可能的方法,如下所示;
- 使用 google 日历 api for JavaScript with npm install
- 在 Next.js
的浏览器中为 node.js 使用 google 日历 api
关于1,官网npm install xxx
貌似没有办法here,但是据说可以用<script src="https://apis.google.com/js/api.js"></script>
。这不是我想要的,因为我使用 Next.js 所以我想通过 npm install 使用这个库。
至于方法二,官网here介绍了npm install googleapi
,但我还是担心可能只能在服务端使用。因为我正在创建一个类似仪表板的网站,所以我想在用户请求他们的仪表板时从客户端(浏览器)调用 API,所以如果我只能在服务器端 运行 它,它对我来说是个问题!
谁能回答一下??
方法一
这种方法是可行的。您提到不想使用 _document.tsx
,这让我觉得您不确定将导入第 3 方 JS 的 <script>
标记放在哪里,或者在 Next.js 中是否允许这样做。它是 — 您将使用 Next.js' 自定义 <Script>
component instead which can be used in other pages and components. You'd just have to port this example 到下一步。js/React.
方法二
googleapis
(或@googleapis/calendar
)包只能在服务器端工作,但如果你将它们导入到客户端(浏览器),你仍然可以call/access它们API 页。例如,pages/api/gcal.ts
将导入 @googleapis/calendar
,然后 pages/index.tsx
将 client-side data request 转换为 http://localhost:3000/api/gcal
。
所以对于你的情况,我认为方法 2 是你想要的。
我想使用 google 日历 api 作为 Next.js 中的库而不使用 _document.tsx。在那种情况下,我想出了两种可能的方法,如下所示;
- 使用 google 日历 api for JavaScript with npm install
- 在 Next.js 的浏览器中为 node.js 使用 google 日历 api
关于1,官网npm install xxx
貌似没有办法here,但是据说可以用<script src="https://apis.google.com/js/api.js"></script>
。这不是我想要的,因为我使用 Next.js 所以我想通过 npm install 使用这个库。
至于方法二,官网here介绍了npm install googleapi
,但我还是担心可能只能在服务端使用。因为我正在创建一个类似仪表板的网站,所以我想在用户请求他们的仪表板时从客户端(浏览器)调用 API,所以如果我只能在服务器端 运行 它,它对我来说是个问题!
谁能回答一下??
方法一
这种方法是可行的。您提到不想使用 _document.tsx
,这让我觉得您不确定将导入第 3 方 JS 的 <script>
标记放在哪里,或者在 Next.js 中是否允许这样做。它是 — 您将使用 Next.js' 自定义 <Script>
component instead which can be used in other pages and components. You'd just have to port this example 到下一步。js/React.
方法二
googleapis
(或@googleapis/calendar
)包只能在服务器端工作,但如果你将它们导入到客户端(浏览器),你仍然可以call/access它们API 页。例如,pages/api/gcal.ts
将导入 @googleapis/calendar
,然后 pages/index.tsx
将 client-side data request 转换为 http://localhost:3000/api/gcal
。
所以对于你的情况,我认为方法 2 是你想要的。