Usage in a Next.js Environment

If you're using Next.js, you'll need to load beacon slightly differently, due to its server-side rendering capabilities. Here's how to do it:

Installation

Before you can use beacon in a Next.js environment, ensure you have installed it using npm as explained in the Installation section of our documentation.

Importing Beacon

In your Next.js code, import the beacon module in the same way as in a regular JavaScript environment:

Loading Beacon

To load Beacon in a Next.js application, make sure you check if the window object is defined before calling Beacon.load. This helps avoid issues with server-side rendering. Here's an example:

import { Beacon } from '@beacon.li/bar';

if (typeof window !== 'undefined') {
    Beacon.load('ORG_ID');
}

With this setup, BeaconBar will be loaded only on the client-side, ensuring compatibility with Next.js.