Since Nextjs does not play that nicely with web components, we strongly recommend to use our official React Wrapper package instead of the default one.
It already mitigates all the potential problems and issues.
npm install add-to-calendar-button-react
Step 2: Import it
Import the module into the component, where you want to use the button.
import { AddToCalendarButton } from 'add-to-calendar-button-react';
Step 3: Use it
Start using it by adding a <AddtoCalendarButton proKey="prokey-of-your-event" /> tag to your source code.
When working with the npm package, you would need to import the atcb_action first:
import { atcb_action } from "add-to-calendar-button-react";
You should also provide a HTML element as second parameter. Event it is optional, it optimizes the UX; especially for keyboard navigation.
In the following example, we also use this element as trigger onClick:
const button = document.getElementById('my-custom-button');
button.addEventListener('click', () => atcb_action({ proKey: "prokey-of-your-event"}, button));