# Next.js Integration

The SDK is SSR-safe out of the box. When imported on the server, a lightweight stub is resolved automatically via the `node` export condition — no dynamic imports or special configuration required. The real SDK activates on the client.

## App Router (Client Component)

```jsx
'use client';

import { useEffect } from 'react';
import { Elements } from '@liquidcommerce/elements-sdk';

export default function ProductPage() {
  useEffect(() => {
    (async () => {
      const client = await Elements('YOUR_API_KEY', {
        env: 'production',
        proxy: { baseUrl: '/api/elements-proxy' }
      });

      await client.injectProductElement([
        { containerId: 'product', identifier: '00619947000020' }
      ]);
    })();
  }, []);

  return <div id="product"></div>;
}
```

## Pages Router

```jsx
import { useEffect } from 'react';
import { Elements } from '@liquidcommerce/elements-sdk';

export default function ProductPage() {
  useEffect(() => {
    (async () => {
      const client = await Elements('YOUR_API_KEY', { env: 'production' });
      await client.injectProductElement([
        { containerId: 'product', identifier: '00619947000020' }
      ]);
    })();
  }, []);

  return <div id="product"></div>;
}
```

## SSR Behavior

When the module is evaluated during SSR (server components, `getServerSideProps`, middleware, etc.):

- All **types and enums** are available — TypeScript works identically.
- `Elements()` and `ElementsBuilder()` return `null` and log a warning.
- No browser APIs (`window`, `document`, `navigator`) are accessed.

You do **not** need `next/dynamic`, conditional `import()`, or `typeof window` guards in your own code.

## Notes

- For ad blocker mitigation, configure the proxy (see [Proxy Setup](./proxy-setup.md)).

## Related Docs

- [Proxy Setup](./proxy-setup.md)
- [Product Component](../guides/product-component.md)
- [Client API](../api/client.md)