Skip to main content

​
Quickstart

Get started with create-nextjs-dapp in under 2 minutes. This guide will walk you through creating your first decentralized application with Next.js and your preferred wallet provider.

​
Create Your Project

1

Run the CLI

Open your terminal and run the following command:
npx create-nextjs-dapp
You can also use your preferred package manager:
  • Yarn: yarn create nextjs-dapp
  • pnpm: pnpm create nextjs-dapp
  • Bun: bunx create-nextjs-dapp
2

Enter Project Name

When prompted, enter your project name:
◆  What is your project named?
│  my-dapp
Your project name must be a valid npm package name (lowercase, no spaces, hyphens allowed).
3

Select Blockchain

Choose which blockchain you want to build on:
◆  Select a blockchain:
│  ● Ethereum (EVM) - Ethereum, Polygon, Base, Arbitrum, etc.
│  ○ Solana - Solana blockchain
  • EVM: For Ethereum and EVM-compatible chains (Polygon, Base, Arbitrum, Optimism, etc.)
  • Solana: For the Solana blockchain
4

Choose Wallet Provider

Select your preferred wallet provider:For EVM:
◆  Select a wallet provider:
│  ● RainbowKit - Best UX for connecting wallets (recommended)
│  ○ ConnectKit - Beautiful, customizable wallet connection UI
│  ○ Privy - Email, social, and wallet login with embedded wallets
│  ○ Dynamic - Multi-chain auth with embedded wallets and onramps
│  ○ Reown (AppKit) - WalletConnect's official SDK (formerly Web3Modal)
│  ○ Thirdweb - Full-stack web3 development platform
│  ○ GetPara (Capsule) - Embedded wallets with MPC key management
For Solana:
◆  Select a wallet provider:
│  ● Solana Wallet Adapter - Standard Solana wallet connection (recommended)
│  ○ Privy - Email, social, and wallet login
│  ○ Dynamic - Multi-chain auth with embedded wallets
│  ○ Reown - WalletConnect's official SDK
│  ○ Thirdweb - Full-stack web3 development platform
5

Wait for Setup

The CLI will create your project with all necessary files and configuration:
◆  Creating project at ./my-dapp...
│  ✔ Project files created
│  ✔ Package.json configured
│  ✔ TypeScript configured
│  ✔ Tailwind CSS configured
│  ✔ Dependencies installed
6

Navigate to Project

Change into your new project directory:
cd my-dapp
7

Install Dependencies (if needed)

If you didn’t use the --install flag, install dependencies now:
npm install
8

Configure Environment Variables

Copy the example environment file and add your API keys:
cp .env.example .env.local
Then edit .env.local and add the required API keys for your wallet provider:
Each wallet provider requires different API keys. Check the generated .env.example file for specific requirements:
  • RainbowKit/ConnectKit: WalletConnect Project ID
  • Privy: Privy App ID
  • Dynamic: Dynamic Environment ID
  • Reown: Reown Project ID
  • Thirdweb: Thirdweb Client ID
  • GetPara: Capsule API Key
9

Start Development Server

Run the development server:
npm run dev
Your dApp will be available at http://localhost:3000

​
Non-Interactive Mode

For automation or CI/CD pipelines, you can skip all prompts by providing options: 
npx create-nextjs-dapp my-dapp --chain evm --wallet rainbowkit

​
What’s Included

Your new project includes:

Pre-configured Wallet

Fully integrated wallet connection with your chosen provider, ready to use

Example Components

Working examples showing how to read and write to smart contracts or programs

Custom Hooks

TypeScript hooks for interacting with blockchain (e.g., useGreeting for EVM)

Tailwind + Dark Mode

Beautiful styling with Tailwind CSS and automatic dark mode support

​
Project Structure

Here’s what your new project looks like: 
my-dapp/
├── app/
│   ├── layout.tsx      # Root layout with wallet providers
│   ├── page.tsx        # Home page with wallet connect button
│   └── globals.css     # Global styles with Tailwind
├── components/
│   ├── Header.tsx      # Wallet connect button
│   ├── Greeting.tsx    # Contract interaction example (EVM only)
│   └── ThemeToggle.tsx # Dark/light mode toggle
├── hooks/
│   └── useGreeting.ts  # Contract interaction hook (EVM only)
├── abi/
│   └── greeter.json    # Contract ABI example (EVM only)
├── lib/
│   └── utils.ts        # Utility functions
├── .env.example        # Environment variables template
├── .env.local          # Your API keys (create this)
├── package.json        # Dependencies and scripts
├── tsconfig.json       # TypeScript configuration
└── tailwind.config.ts  # Tailwind configuration

​
Next Steps

Installation Guide

Learn about prerequisites and installation options

CLI Options

Explore all available CLI flags and options

Project Structure

Understand your project’s file structure

Wallet Providers

Learn about each wallet provider in detail

​
Common Commands

Here are the most common commands you’ll use: 
# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

# Type checking
npm run typecheck
Don’t forget to configure your environment variables! Your dApp won’t work without the required API keys in .env.local.

​
Getting Help

If you run into issues:
  1. Check the Installation guide for troubleshooting tips
  2. Review the CLI Options for all available options
  3. Visit our GitHub Issues to report bugs
  4. Read the documentation for your chosen wallet provider
Pro tip: Use the --help flag to see all available options:
npx create-nextjs-dapp --help

Build docs developers (and LLMs) love

Get started for freeTalk to us