This is an opinionated, simple guide to quickly create a dapp using Next.js, RainbowKit, and Tailwind
Next.js App
In the development directory of your choice, run:
npx create-next-app@latest --ts
Simple as that! The tool will run you through a wizard to set up some basic configuration for your project and scaffold a Next app with Typescript support and built-in types, requiring no further configuration.
Tailwind.css
The next step is installing and setting up Tailwind.css
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
This will install Tailwind and some required dependencies, as well as generate both your tailwind.config.js and postcss.config.js files, which are empty by default. You’ll then want to add the following to tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Once this is complete, the app is setup to use Tailwind! Refer to the Tailwind docs for more info on using Tailwind and how you can change its configs.
RainbowKit
Now it’s time to set up RainbowKit. The Rainbow team has a CLI tool that actually does this and the Next app steps for you, but we’re doing this the ‘hard’ way so you can get a better feel for how things work.
Install RainbowKit and it’s required dependencies:
npm install @rainbow-me/rainbowkit wagmi ethers
Now, go to your pages/_app.tsx file and replace it with the following:
import "../styles/globals.css";
import type {AppProps} from "next/app";
import "@rainbow-me/rainbowkit/styles.css";
import {getDefaultWallets, RainbowKitProvider} from "@rainbow-me/rainbowkit";
import {chain, configureChains, createClient, WagmiConfig} from "wagmi";
import {alchemyProvider} from "wagmi/providers/alchemy";
import {publicProvider} from "wagmi/providers/public";
const {chains, provider} = configureChains(
[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
[alchemyProvider({apiKey: process.env.ALCHEMY_ID}), publicProvider()]
);
const {connectors} = getDefaultWallets({
appName: "My Dapp",
chains,
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
});
export default function App({Component, pageProps}: AppProps) {
return (
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</WagmiConfig>
);
}
What we’re doing here is configuring the clients and context providers required for wagmi, ethers, and RainbowKit. The connectors and wagmiClient variables can be edited and configured how you need them to be, but the default is good here. More information on those can be found here.
Now that RainbowKit is installed and set up, we need to add the connect button so that we can actually connect to the chain from a wallet. In your pages/index.tsx file, import the ConnectButton component and insert it into the view as shown below:
{...}
import styles from "../styles/Home.module.css";
import {ConnectButton} from "@rainbow-me/rainbowkit";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<ConnectButton />
{...}
You can put the component anywhere, this is only an example. Once you’ve done this, run npm run dev to serve up the site. You should notice a button reading ‘Connect Wallet’ that, when clicked, will prompt you to connect to an assortment of crypto wallets.
That’s it! You’re now all set to build your dapp.