Genji

A Next.js Web3 app template.

Install

pnpm i

Run

Create a .env file:

cp .env.example .env

Add your own keys in the .env file (you can get it in your Reown dashboard), then:

pnpm dev

Getting Started Guide

1. Customize Your App

Change the app name and details in these files:

package.json                     # name, version, description
src/app/metadata.ts             # title, description
src/context/index.tsx           # metadata.name, metadata.description
src/components/Header.tsx       # Heading text

2. Configure SEO

Default SEO (src/app/metadata.ts):

export const metadata: Metadata = {
  title: 'Your App Name',
  description: 'Your app description',
  openGraph: {
    title: 'Your App Name',
    description: 'Your app description',
    images: ['/huangshan.png'], // Replace with your image
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your App Name',
    description: 'Your app description',
  },
}

Page-specific SEO:

Create a layout.tsx in your page directory:

// src/app/your-page/layout.tsx
export const metadata: Metadata = {
  title: 'Page Title | Your App Name',
  description: 'Page specific description',
  // ... openGraph and Twitter cards
}

3. Configure Networks

Edit supported networks in src/context/index.tsx:

networks: [
  sepolia, // Default testnet
  optimism,
  base,
  // Add or remove networks as needed
]

4. Set Up Reown

1. Create an account at Reown Dashboard
2. Create a new project
3. Copy your Project ID
4. Add to .env:

NEXT_PUBLIC_PROJECT_ID=your_project_id

5. Domain Verification

1. Create .well-known/walletconnect.txt in your public folder
2. Add your verification details from Reown dashboard
3. Ensure it's accessible at: your-domain/.well-known/walletconnect.txt

6. Documentation References

• Ethers.js v6 - Ethereum library
• Reown AppKit - Web3 authentication
• Chakra UI - UI components
• Next.js - React framework

Support

Feel free to reach out to Julien on Farcaster, Element, Status, Telegram, Twitter, Discord, or LinkedIn.