Install OnchainKit using Next.js
Install Next.js
Install OnchainKit
Get Your Client API Key
.env
file in your project’s root directory..env
file:Add Providers
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.Wrap your app with <Providers />
<Providers />
component.Add Styles
app/layout.tsx
might look like this:Identity
– Show Basenames, avatars, badges, and addresses.Wallet
– Create or connect wallets with Connect Wallet.Transaction
– Handle transactions using EOAs or Smart Wallets.Checkout
– Integrate USDC checkout flows with ease.Fund
– Create a funding flow to onboard users.Tokens
– Search and display tokens with various components.Swap
– Enable token swaps in your app.Mint
– View and Mint NFTs in your app.