# NextJS

This guide uses the Next.js App Router pattern, which matches the maintained example in the widget repository. The widget must run on the client, so the widget component should be a client component and exported through `dynamic(..., { ssr: false })`.

To create a new app, you can run `npx create-next-app@latest <your-app-name>`. Then install the Kima Widget and its peer dependencies.

```bash
npm install @kimafinance/kima-transaction-widget redux react-redux pino-pretty
```

You'll need to add the following:

* A client-side widget component
* The `<KimaProvider>` component
* The `<KimaTransactionWidget>` component
* A link to the Kima Transaction Backend (or build your own)
* A Reown project id

If you don't have one already, you'll need to get a free Reown project ID from [Reown Cloud](https://cloud.reown.com/sign-in) and pass it to the `projectId` prop on `<KimaProvider>`.

Create a file at `src/components/KimaWidget.tsx` with the following code:

```tsx
"use client";

import dynamic from "next/dynamic";
import React from "react";

import {
  KimaTransactionWidget,
  KimaProvider,
  ModeOptions,
  ColorModeOptions,
} from "@kimafinance/kima-transaction-widget";
import "@kimafinance/kima-transaction-widget/index.css";

const Widget = () => {
  return (
    <KimaProvider
      projectId="your-project-id"
      kimaBackendUrl="http://localhost:4000"
    >
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.bridge}
      />
    </KimaProvider>
  );
};

const KimaWidget = dynamic(() => Promise.resolve(Widget), {
  ssr: false,
});

export default KimaWidget;
```

Then render it from `src/app/page.tsx`:

```tsx
"use client";

import KimaWidget from "@/components/KimaWidget";

export default function Home() {
  return <KimaWidget />;
}
```

If your project does not use the `@/` alias, replace it with the relative import path to `src/components/KimaWidget`.

When you visit `http://localhost:3000` you will see something like this:

<figure><img src="/files/030JUjbitbwp0y2XCN3p" alt=""><figcaption></figcaption></figure>

The widget example maintained in this repo follows the same structure:

* `src/components/KimaWidget.tsx` for the client-side dynamic widget wrapper
* `src/app/page.tsx` for rendering the widget in the App Router

See the [Configuration options](/kima-network/the-kima-sdk/add-kima-widget-to-your-app/configure-kima-widget.md) section for more details on setting up the widget.

## Pages Router

If your app still uses the older Pages Router, the same client-only requirement applies, but the maintained reference example in this repo is App Router first.

## Troubleshooting

### Turbopack (Development)

The widget is not currently compatible with the `--turbopack` flag. Please disable this flag when running the development server.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kima.network/kima-network/the-kima-sdk/add-kima-widget-to-your-app/add-kima-widget-next.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.