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;
- Use google calendar api for JavaScript with npm install
- 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??
CodePudding user response：
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.