# Next.js

> App Router and Pages Router.

Source: https://docs.usejot.co/docs/install/nextjs

<Callout title="Packages are on their way to npm">
  Until `@usejot/next` is published, use `next/script` as shown [below](#without-the-package).
</Callout>

```bash
npm install @usejot/next
```

```tsx title="app/layout.tsx"
import { JotWidget } from "@usejot/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <JotWidget projectKey="jot_pk_your_key" />
      </body>
    </html>
  );
}
```

`JotWidget` is a client component, so it is safe in a server layout. For the
Pages Router, put the same component in `pages/_app.tsx`.

Every [script option](/docs/install/script#options) is a prop: `trigger`,
`edge`, `offset`, `environment`, `autostart`.

## Without the package

`next/script` with `lazyOnload` fetches the loader after everything of yours
has loaded — the right trade for a feedback widget.

```tsx title="app/layout.tsx"
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.jsdelivr.net/npm/@usejot/widget@1/dist/jot.js"
          data-jot-key="jot_pk_your_key"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}
```

## Only on some deploys

Most teams want Jot on staging and preview deploys, not production. Render it
behind whatever flag you already use, and tag reports with the environment so
they never mix:

```tsx
function Feedback({ show }: { show: boolean }) {
  return show ? <JotWidget projectKey="jot_pk_your_key" environment="preview" /> : null;
}
```