How to get started with AppKit

Learn how to get started with AppKit the all-in-one SDK for app builders, using Next.js

The New Internet needs more apps. Yet, many builders find themselves hindered by complex tools and fragmented solutions, slowing the creation of innovative apps. This is where AppKit comes in—a comprehensive stack that empowers developers of all levels to create apps with unparalleled ease and efficiency. Whether you’re crafting a simple DApp or a complex ecosystem, AppKit’s rich, layered feature set ensures you have everything you need in one place.

In this tutorial, we’ll guide you step-by-step through integrating AppKit into a Next.js application. From onboarding to payments, messaging, and beyond, you’ll discover how AppKit simplifies the development process while enhancing the user experience. By the end of this guide, you’ll be equipped with the knowledge and tools to build cutting-edge web3 applications that are both powerful and user-friendly.

Getting Started

Let's begin by bootstrapping a default Next.js project.

Note: AppKit is compatible with React, Next.js, Vue, JavaScript, React Native, Flutter, Android, iOS, or Unity.

npx create-next-app@latest appkit-example && cd appkit-example/

1. Install AppKit

Install AppKit and its dependencies using your package manager of choice.

In this tutorial, I'll be using npm:

npm install @web3modal/wagmi wagmi viem @tanstack/react-query

2. Get a Project ID

Go to cloud.reown.com. If you don’t have an account yet, create one (~30 seconds), and create a new project. Copy the Project ID.

Create an .env file to store the Project ID (skip if you already have an .env file):

touch .env

Add the Project ID to the .env file:

NEXT_PUBLIC_PROJECT_ID="xxxxxxxxxxxxxxxxxx"

3. Import Libraries and Configure AppKit Features

Open app/page.tsx and clear everything between <main> and </main> to remove the boilerplate.

Create a new file for your Wagmi configuration in a new folder: config/index.tsx.

import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
import { cookieStorage, createStorage } from 'wagmi';
import { mainnet, arbitrum, sepolia } from 'wagmi/chains';

// Get projectId from <https://cloud.reown.com>
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

if (!projectId) throw new Error('Project ID is not defined');

const metadata = {
  name: 'AppKit example',
  description: 'AppKit Example',
  url: '',
  icons: ['https://avatars.githubusercontent.com/u/37784886']
};

// Create wagmiConfig
const chains = [mainnet, arbitrum, sepolia] as const;
export const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  auth: {
    email: true,
    socials: ["google", "x", "github", "discord", "apple"],
    showWallets: true,
    walletFeatures: true
  },
  ssr: true,
  storage: createStorage({
    storage: cookieStorage
  }),
});

Choose the chains you want to use in your app. The code above selects Ethereum mainnet, arbitrum, and sepolia testnet. For a full list of chains, check here.

4. Create Context and Wrap Providers

Create a context provider to wrap your application and initialize Web3Modal. Create a file called context/index.tsx and add the following configuration.

"use client";

import React, { ReactNode } from "react";
import { config, projectId } from "@/config";
import { createWeb3Modal } from "@web3modal/wagmi/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { State, WagmiProvider } from "wagmi";

const queryClient = new QueryClient();

if (!projectId) throw new Error("Project ID is not defined");

createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true,
  enableOnramp: true,
  themeMode: "light"
});

export default function Web3ModalProvider({ children, initialState }: { children: ReactNode; initialState?: State }) {
  return (
    <WagmiProvider config={config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

Next, in app/layout.tsx, import the Web3ModalProvider component.

import "./globals.css";
import type { Metadata } from "next";
import { headers } from "next/headers";
import { Inter } from "next/font/google";
import { cookieToInitialState } from "wagmi";
import { config } from "@/config";
import Web3ModalProvider from "@/context";

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

export const metadata: Metadata = {
  title: "AppKit Example App",
  description: "AppKit by reown"
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const initialState = cookieToInitialState(config, headers().get("cookie"));
  return (
    <html lang="en">
      <body>
        <Web3ModalProvider initialState={initialState}>{children}</Web3ModalProvider>
      </body>
    </html>
  );
}

5. Ready to Start!

Now you’re ready to start using the modal!

To open Web3Modal, you can use the web component or build your own button with Web3Modal hooks. Let’s use the <w3m-button> component here.

In app/page.tsx, create a header section with your component.

"use client";

import { useAccount } from "wagmi";

export default function Home() {
  const { isConnected } = useAccount();

  return (
    <main className="min-h-screen px-8 py-0 pb-12 flex-1 flex flex-col items-center bg-white">
      <header className="w-full py-4 flex justify-between items-center">
        <div className="flex items-center">
          <div className="hidden sm:inline text-xl font-bold">reown AppKit example app</div>
        </div>
        <div className="flex items-center">
          <w3m-button />
        </div>
      </header>
    </main>
  );
}

Conclusion

Congratulations! You’ve successfully integrated AppKit into your Next.js application. By following this tutorial, you’ve unlocked the ability to create seamless, UX-first applications for the new internet. With AppKit, you now have a fully functional “magic button” that provides support for over 500 wallets, out-of-the-box web components for connection, account, and network switch buttons, and full responsiveness and mobile-friendliness.

Additionally, AppKit offers automatic recognition of users’ wallet extensions, email logins, social logins, and Smart Accounts with email or social logins. You’ll also benefit from transaction history, on-ramp services via Coinbase Pay, and the ability to perform swaps within the modal.

Next Steps:

Now that you have a solid foundation, consider exploring additional functionalities. Dive deeper into customizing your user interface, adding new chains, or integrating advanced features. The flexibility of AppKit means you’re only limited by your creativity.

The future of the new internet is in your hands—keep building, experimenting, and innovating. The possibilities are endless, and your next groundbreaking app could be just around the corner.

Resources

Source code: https://github.com/reown/web-examples/tree/main/dapps/web3modal/next

AppKit docs: https://docs.reown.com/appkit/overview

GitHub Discussions: https://github.com/orgs/reown/discussions

Related articles

More articles