> For the complete documentation index, see [llms.txt](https://api.beacon.li/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api.beacon.li/beacon-usage/usage-in-a-next.js-environment.md).

# 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](https://chat.openai.com/c/afc86dfa-395c-4739-9545-7f5362fe6445#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.