如何将谷歌日历 api 用于 JavaScript 与 npm 安装？ 或者是否可以在 Nextjs 的浏览器中为 nodejs 使用 google calendar api？

Question

I want to use google calendar api as library in Next.js without using _document.tsx. In that case, I have come up with 2 ways which might be possible as below;

1. Use google calendar api for JavaScript with npm install
2. Use google calendar api for node.js in browser in Next.js

Regarding 1, there is seemingly no ways to npm install xxx in the official site here , but <script src="https://apis.google.com/js/api.js"></script> is said to use. This is not what I wanted because I use Next.js so I wanna use this library using npm install.

As for method 2, npm install googleapi is introduced on the official site here , but I'm still concerned that it may only work on the server side. Since I am creating a dashboard-like site, I want to call the API from the client side (browser) when users request their dashboard, so if I can only run it on the server side, it will be a problem for me!

Anyone can answer that??

Answer 1

Method 1

This approach is viable. You mentioned not wanting to use _document.tsx which makes me think you're not sure where to place the <script> tag that imports 3rd-party JS or if that's even allowed in Next.js. It is — you would use Next.js' custom <Script> component instead which can be used in other pages and components. You'd just have to port this example over to Next.js/React.

Method 2

The googleapis (or @googleapis/calendar ) package will only work on the server side, but you can still call/access them from the client side (browser) if you import them into API pages. For example, pages/api/gcal.ts would import @googleapis/calendar then pages/index.tsx would make a client-side data request to http://localhost:3000/api/gcal .

So for your case, I think method 2 is what you'd want.

Answer 2

In case people are still looking for a definitive working solution event after reading @Mark G's response above here is the way I implemented it.

Package used:

npm i googleapis --save

Step 1: Create a googleService.js file under the /pages/api

Step 2: initialized the google javascript object over here as this runs on server side this will work fine

// Import the Google Calendar API
const { google } = require('googleapis')

export default function handler(req, res) {
  // Fetch Calendar Service Instance
  if (req.method === 'GET') {
    res.status(200).json({
      googleApiInstance: google.calendar({
        version: 'v3',
        auth: process.env.NEXT_PUBLIC_G_API_KEY,
      }),
    })
  }
}

Step 3: Used this res object to set the Google API instance object in my service file using the useEffect hook on my main application landing page. As I didn't want to create multiple API handling in the pages/api way

useEffect(() => {
    fetch(`api/googleService`).then((res) => {
      if (res.status !== 200) {
        throw new Error(data.message)
      }
      res.json().then((data) => {
        if (data?.googleApiInstance) {
          GoogleService.initService(data.googleApiInstance)
        }
      })
    })
  }, [])

Not the ideal way I would have loved to do this, but hope this helps for others.