# Next.js
> Add Shipabase to a Next.js App Router project.
Source: https://shipabase.dev/docs/nextjs
## Install
`Terminal`
```bash
npm i @shipabase/js
```
`.env.local`
```bash
NEXT_PUBLIC_SHIPABASE_KEY=SB-EU-xxxxxxxxxx
```
## Create a providers component
`app/providers.tsx`
```tsx
"use client";
import { useEffect } from "react";
import { init } from "@shipabase/js";
export function Providers({ children }: { children: React.ReactNode }) {
useEffect(() => {
init(process.env.NEXT_PUBLIC_SHIPABASE_KEY!, { appVersion: "1.0.0" });
}, []);
return <>{children};
}
```
## Wrap your layout
`app/layout.tsx`
```tsx
import { Providers } from "./providers";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## Track events
`any client component`
```tsx
"use client";
import { trackEvent } from "@shipabase/js";
;
```
> Importing `@shipabase/js` in server code won’t crash, but call `init` and `trackEvent` from the browser (in `useEffect` or event handlers). For server-side events, use [`@shipabase/js/node`](https://shipabase.dev/docs/node).
Pages Router: call `init` in a `useEffect` in `pages/_app.tsx`.