Skip to Content
Next.Js

Integrating Okito with Next.js

Getting started with the @okito in your Next.js application is straightforward. This guide will walk you through installing and configuring the environment to use Okito.

Create a Next.Js Project

First, you need to have a Next.js project. Create a new project by running the command below in terminal.

terminal
npx create-next-app@latest --name my-okito-app
cd my-okito-app
npm install

Getting started with Solana

Follow the steps below to setup your Next.Js application with appropriate solana development environment.

Step 1

Install the required packages offered by Solana:

terminal
npm install @solana/wallet-adapter-react @solana/web3.js @solana/wallet-adapter-react-ui

Step 2

Create a new provider(wallet-provider) for the wallet adapters in Solana:

wallet-provider.tsx
'use client'
import { ConnectionProvider,WalletProvider } from "@solana/wallet-adapter-react";
import {clusterApiUrl} from "@solana/web3.js";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 
require('@solana/wallet-adapter-react-ui/styles.css');
 
export default function Wallet({children}: {children: React.ReactNode}) {
 
    const endpoint = clusterApiUrl('mainnet-beta')  // mainnet-beta || devnet || testnet
 
    return (
       <ConnectionProvider endpoint={endpoint}> 
        <WalletProvider wallets={[]} autoConnect>
            <WalletModalProvider>
                {children}
            </WalletModalProvider>
        </WalletProvider>
       </ConnectionProvider>
    )
}

clusterApiUrl

The clusterApiUrl function returns the endpoint URL for a given Solana network. You can specify:

  • mainnet-beta: The primary Solana network where real SOL is used for transactions.
  • devnet: A development network, ideal for building and testing your dApp without using real SOL.
  • testnet: A public test network for final testing before deploying to mainnet.

Custom RPC URL
Alternatively, you can use a custom RPC endpoint from providers like Alchemy, Infura, or others by directly specifying their URL.

Step 3

Wrap your application’s root layout.tsx with the Wallet provider you just created.

layout.tsx
import Wallet from '@/components/wallet-provider'
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Wallet>
      {/** Other providers **/} 
      {children}
      </Wallet>
    </html>
  );
}

Step 4

You’ve now finished setting up your Next.js app to work with Okito!

Last updated on
Getting StartedVite