Getting started with Next.js

Generate new application

If you start from scratch, you can use create-next-app to create new Next.js application:

npx create-next-app@latest --app --src-dir --typescript --tailwind

pnpm dlx create-next-app@latest --app --src-dir --typescript --tailwind

yarn dlx create-next-app@latest --app --src-dir --typescript --tailwind

bun x create-next-app@latest --app --src-dir --typescript --tailwind

Install dependencies

Now that you have a Next.js app (either a new or existing one), you can install the dependencies:

npm install @wallet-ui/react @wallet-ui/core

pnpm add @wallet-ui/react @wallet-ui/core

yarn add @wallet-ui/react @wallet-ui/core

bun add @wallet-ui/react @wallet-ui/core

Add Solana Provider

src/components/solana-provider.tsx

'use client';

import { ReactNode } from 'react';
import { createSolanaDevnet, createSolanaLocalnet, createWalletUiConfig, WalletUi } from '@wallet-ui/react';

const config = createWalletUiConfig({
    clusters: [
        // You can add mainnet when you're ready
        // createSolanaMainnet('https://mainnet.your-rpc.com?api-key=secret'),
        createSolanaDevnet(),
        createSolanaLocalnet(),
    ],
});

export function SolanaProvider({ children }: { children: ReactNode }) {
    return <WalletUi config={config}>{children}</WalletUi>;
}

Add provider to your layout

src/app/layout.tsx

import { SolanaProvider } from '@/components/solana-provider';

export default function RootLayout({ children }: { children: ReactNode }) {
    return (
        <html lang="en" suppressHydrationWarning>
            <body>
                <SolanaProvider>{children}</SolanaProvider>
            </body>
        </html>
    );
}

Add styles to src/app/globals.css

src/app/globals.css

@import 'tailwindcss';
@import '@wallet-ui/tailwind/index.css';

You should now be able to use the components in your app.

Generate new application

Install dependencies

Add Solana Provider

Add provider to your layout

Add styles to src/app/globals.css

On this page