Install and configure OnchainKit with Next.js. If you are integrating OnchainKit into an existing project, skip to the OnchainKit installation.

1

Install Next.js

Create a new Next.js project by using the Next.js CLI. More information about Next.js can be found here.

npm
npx create-next-app@14

During the setup process you will encounter multiple prompts. Make sure you enable TypeScript, ESLint, and Tailwind CSS.

2

Install OnchainKit

Install OnchainKit in your project.

npm install @coinbase/onchainkit
3

Get Your Client API Key

Get your Client API Key from Coinbase Developer Platform.

Create a .env file in your project’s root directory.

Add your Client API Key to the .env file:

.env
NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY;
4

Add Providers

Create a providers.tsx file. Add OnchainKitProvider with your desired config.

Under the hood, OnchainKit will create our recommended Wagmi and QueryClient providers. If you wish to customize these providers, check out Custom Supplemental Providers.

providers.tsx
// @noErrors: 2307 2580 2339 - cannot find 'process', cannot find './wagmi', cannot find 'import.meta'
'use client';

import type { ReactNode } from 'react';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { base } from 'wagmi/chains'; // add baseSepolia for testing

export function Providers(props: { children: ReactNode }) {
  return (
    <OnchainKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
      chain={base} // add baseSepolia for testing
    >
      {props.children}
    </OnchainKitProvider>
  );
}
5

Wrap your app with <Providers />

After the setup, wrap your app with the above <Providers /> component.

app.tsx
import './globals.css';
import { Providers } from './providers'; 

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  return (
    <html lang="en">
      <body>
        <Providers> 
          {children}
        </Providers>
      </body>
    </html>
  );
}
6

Add Styles

OnchainKit components come with pre-configured styles. To include these styles in your project, add the following import statement at the top of this file:

import '@coinbase/onchainkit/styles.css';

For example, if you’re using Next.js with the app router, your app/layout.tsx might look like this:

layout.tsx
import '@coinbase/onchainkit/styles.css'; 
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { headers } from 'next/headers';
import { type ReactNode } from 'react';
import { cookieToInitialState } from 'wagmi';

import { getConfig } from '../wagmi';
import { Providers } from './providers';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Wagmi',
  description: 'Generated by create-wagmi',
};

export default function RootLayout(props: { children: ReactNode }) {
  const initialState = cookieToInitialState(
    getConfig(),
    headers().get('cookie')
  );
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers initialState={initialState}>{props.children}</Providers>
      </body>
    </html>
  );
}

This ensures that the OnchainKit styles are loaded and applied to your entire application.

  • For Tailwind CSS users, check out our Tailwind Integration Guide.

  • Update the appearance of components by using our built-in themes or crafting your own custom theme. Explore the possibilities in our Theming Guide.

​
Start building!

Explore our ready-to-use onchain components: