Next.js Package

Next.js is a full-stack React framework with built-in routing and server-side rendering capabilities. AI Scaffolding provides a pre-configured Next.js setup to help you build modern web applications.

Configuration Options

When adding the Next.js package to your project, you'll be prompted to configure the following options:

Package Name

You can customize the name of your Next.js package. By default, it's set to nextjs.

? Enter the name of the nextjs package: (nextjs)

This name will be used as the package name in your project's workspace, e.g., @your-project/nextjs.

Wallet Connector

If you've included the Hardhat package, you'll be prompted to choose a wallet connector for your Next.js frontend:

? Choose your wallet connector:
❯ wagmi
  ethers.js
  (none)

Options include:

wagmi: React hooks for Ethereum (recommended)
ethers.js: Popular Ethereum library
(none): No Web3 connection

RainbowKit Integration

If you choose wagmi as your wallet connector, you'll be asked if you want to add RainbowKit:

? Do you want to add RainbowKit? (A beautiful and feature-rich wallet connection UI) (y/N)

RainbowKit provides a polished UI for connecting wallets to your dApp.

Burner Wallet Support

If you enable RainbowKit, you'll also be asked if you want to add support for burner wallets:

? Do you want to add support for burner wallets? (y/N)

Burner wallets are temporary wallets that can be created on the fly, useful for testing or demos.

Networks

If you're not using Hardhat but still using a wallet connector, you'll be prompted to select which networks to support:

? Select networks:
❯◯ Mainnet
 ◯ Sepolia
 ◯ SilentData

Project Structure

After creating a project with the Next.js package, the following structure will be generated:

your-project/
└── packages/
    └── nextjs/
        ├── src/
        │   ├── app/
        │   │   ├── layout.tsx
        │   │   ├── page.tsx
        │   │   └── config.ts
        │   ├── components/
        │   │   └── ... (UI components)
        │   ├── contracts/
        │   │   └── ... (Contract interactions)
        │   └── lib/
        │       └── ... (Utility functions)
        ├── public/
        ├── next.config.ts
        ├── tsconfig.json
        ├── package.json
        ├── .env.example
        └── README.md

If you choose to include Web3 connectivity, additional files and directories will be added for wallet connection and contract interactions.

Environment Setup

Create a .env file in the packages/nextjs directory based on the provided .env.example file:

cd packages/nextjs
cp .env.example .env

Then configure the following environment variables:

# Network configuration
NEXT_PUBLIC_CHAIN_NAME=hardhat

# Contract address (not needed if using Hardhat in same project)
NEXT_PUBLIC_CONTRACT_ADDRESS=0x...

# WalletConnect project ID (needed for RainbowKit)
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id

# Burner wallet settings (if enabled)
NEXT_PUBLIC_BURN_WALLET_ENABLED=true
NEXT_PUBLIC_BURN_WALLET_USE_SESSION_STORAGE=false

# Silent Data specific variables (if using Silent Data)
NEXT_PUBLIC_SILENTDATA_CHAIN_ID=1337
NEXT_PUBLIC_SILENTDATA_RPC_URL=https://api.silentdata.com/...

Common Commands

Once you've set up the Next.js package, you can use the following commands from your project root:

pnpm

# Start development server
pnpm nextjs dev
 
# Build for production
pnpm nextjs build
 
# Start production server
pnpm nextjs start
 
# Run linting
pnpm nextjs lint

Web3 Integration

If you've configured the Next.js package with Web3 connectivity, here's how to use it in your code:

Using wagmi

'use client';
 
import { useAccount, useReadContract } from 'wagmi';
import { lockAbi } from '@/contracts/abis/Lock';
 
export default function MyComponent() {
  const { address, isConnected } = useAccount();
  
  const { data: unlockTime } = useReadContract({
    address: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
    abi: lockAbi,
    functionName: 'unlockTime',
  });
  
  return (
    <div>
      {isConnected ? (
        <div>
          <p>Connected: {address}</p>
          <p>Unlock Time: {unlockTime?.toString()}</p>
        </div>
      ) : (
        <button>Connect Wallet</button>
      )}
    </div>
  );
}

Using RainbowKit

If you've enabled RainbowKit, a wallet connection button is included out of the box:

'use client';
 
import { ConnectButton } from '@rainbow-me/rainbowkit';
 
export function Header() {
  return (
    <header className="flex justify-between items-center p-4">
      <h1 className="text-xl font-bold">My dApp</h1>
      <ConnectButton />
    </header>
  );
}

Using ethers.js

If you selected ethers.js as your wallet connector:

'use client';
 
import { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import { Lock__factory } from '@your-project/hardhat/typechain-types';
 
export default function MyComponent() {
  const [unlockTime, setUnlockTime] = useState<string>('');
  
  useEffect(() => {
    async function fetchData() {
      if (window.ethereum) {
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const lock = Lock__factory.connect(
          process.env.NEXT_PUBLIC_CONTRACT_ADDRESS as string,
          provider
        );
        const time = await lock.unlockTime();
        setUnlockTime(time.toString());
      }
    }
    fetchData();
  }, []);
  
  return <div>Unlock Time: {unlockTime}</div>;
}

Customizing the Next.js App

You can customize your Next.js app by modifying the following key files:

Next.js Configuration

Modify next.config.ts to add plugins or change build settings:

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.externals.push('pino-pretty', 'lokijs', 'encoding');
    return config;
  },
  // Add custom Next.js configuration here
}
 
export default nextConfig

Tailwind Configuration

Customize Tailwind CSS by modifying tailwind.config.ts:

import type { Config } from 'tailwindcss';
 
export default {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      // Add custom colors, fonts, etc.
    },
  },
  plugins: [
    // Add Tailwind plugins here
  ],
} satisfies Config;

App Router Structure

Next.js uses the App Router by default. You can create new routes by adding directories in the src/app directory:

src/app/
├── layout.tsx       # Root layout
├── page.tsx         # Home page
├── about/
│   └── page.tsx     # About page
└── dashboard/
    ├── layout.tsx   # Dashboard layout
    └── page.tsx     # Dashboard page