Skip to content
Docs

Next.js Installation

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

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
npm create next-app@latest

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

Install OnchainKit

Install OnchainKit in your project.

npm
npm install @coinbase/onchainkit

Get Your Client API Key

Get your Client API Key from Coinbase Developer Platform.

OnchainKit copy Client API Key

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

OnchainKit define Client API Key

Add your Client API Key to the .env file:

.env
NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY

Add Providers

Create a providers.tsx file. Add OnchainKitProvider as a child of WagmiProvider and QueryClientProvider.

Inside the WagmiProvider, wrap your app in a TanStack Query React Context Provider, e.g. QueryClientProvider, and pass a new QueryClient instance to the client property.

Additionally, add Base as a supported chain in the Wagmi configuration file wagmi.ts.

wagmi.ts
import { http, cookieStorage, createConfig, createStorage } from 'wagmi';
import { base } from 'wagmi/chains'; // add baseSepolia for testing
import { coinbaseWallet } from 'wagmi/connectors';
 
export function getConfig() {
  return createConfig({
    chains: [base], // add baseSepolia for testing
    connectors: [
      coinbaseWallet({
        appName: "OnchainKit",
        preference: 'smartWalletOnly',
        version: '4',
      }),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [base.id]: http(), // add baseSepolia for testing
    },
  });
}
 
declare module 'wagmi' {
  interface Register {
    config: ReturnType<typeof getConfig>;
  }
}

Wrap your app with <Providers />

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

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>
  );
}

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: