可以不是真名1. 为什么选择Next.js+wagmi开发NFT DApp？
在区块链应用开发领域，技术栈的选择往往决定了开发效率和最终用户体验。Next.js作为React的元框架，与wagmi这一专为以太坊设计的React Hooks库结合，形成了当前开发Web3前端应用的最佳实践组合。
Next.js提供了三大关键优势：
- 服务端渲染（SSR）能力：解决传统React应用在SEO和首屏加载上的痛点
- API路由集成：后端逻辑可以直接写在项目中，无需额外搭建服务器
- 开箱即用的TypeScript支持：这对需要处理复杂数据类型的区块链开发尤为重要
而wagmi库则专门针对以太坊生态进行了优化：
typescript复制import { useAccount, useConnect, useDisconnect } from 'wagmi'
通过这样简单的Hook调用，就能实现钱包连接、账户状态管理等核心功能，相比直接使用ethers.js或web3.js，开发效率提升显著。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备与项目初始化
2.1 开发环境配置
首先确保你的系统已安装：
- Node.js v16或更高版本
- Yarn或npm（推荐Yarn）
- Git版本控制
创建项目目录并初始化：
bash复制npx create-next-app@latest nft-minting-dapp --typescript
cd nft-minting-dapp
yarn add wagmi viem @rainbow-me/rainbowkit
RainbowKit是wagmi的配套UI组件库，能快速实现美观的钱包连接界面。安装完成后，修改_app.tsx进行配置：
typescript复制import { WagmiConfig, createConfig } from 'wagmi'
import { mainnet, polygon } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
const config = createConfig({
autoConnect: true,
connectors: [
new injectedConnector({ chains }),
],
publicClient: publicProvider(),
})
2.2 合约交互准备
假设我们已经有一个简单的NFT合约部署在Sepolia测试网：
solidity复制// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleNFT {
mapping(uint256 => address) public ownerOf;
uint256 public nextTokenId = 1;
function mint() external payable {
require(msg.value == 0.01 ether, "Need 0.01 ETH");
ownerOf[nextTokenId] = msg.sender;
nextTokenId++;
}
}
我们需要获取合约ABI并创建交互Hook：
typescript复制import { useContractWrite, usePrepareContractWrite } from 'wagmi'
const { config } = usePrepareContractWrite({
address: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e',
abi: [...], // 合约ABI
functionName: 'mint',
value: parseEther('0.01')
})
const { write: mint } = useContractWrite(config)
3. 核心功能实现详解
3.1 钱包连接模块
使用RainbowKit可以快速实现专业级的钱包连接界面：
typescript复制import { ConnectButton } from '@rainbow-me/rainbowkit'
function Header() {
return (
<header>
<ConnectButton
accountStatus="address"
chainStatus="icon"
showBalance={false}
/>
</header>
)
}
这个组件会自动处理：
- 多种钱包提供商检测（MetaMask、WalletConnect等）
- 网络切换提示
- 账户余额显示
- 响应式设计适配
3.2 NFT铸造页面开发
创建核心铸造页面pages/mint.tsx：
typescript复制export default function MintPage() {
const { isConnected } = useAccount()
const [minting, setMinting] = useState(false)
const handleMint = async () => {
try {
setMinting(true)
await mint?.()
toast.success('NFT铸造成功！')
} catch (err) {
toast.error('铸造失败')
} finally {
setMinting(false)
}
}
return (
<div className="mint-container">
{!isConnected ? (
<div className="connect-wallet-notice">
<p>请先连接钱包</p>
<ConnectButton />
</div>
) : (
<button
onClick={handleMint}
disabled={minting}
>
{minting ? '铸造中...' : '铸造NFT (0.01 ETH)'}
</button>
)}
</div>
)
}
关键点说明：
- 使用
useAccount检测钱包连接状态 - 铸造状态管理防止重复点击
- 交易结果Toast通知
- 响应式按钮状态
3.3 交易状态监控
通过wagmi可以轻松监听交易状态：
typescript复制const { data: txData } = useWaitForTransaction({
hash: txHash,
onSuccess(data) {
console.log('交易确认', data)
},
onError(error) {
console.error('交易失败', error)
}
})
4. 高级功能与优化实践
4.1 网络切换处理
DApp需要处理用户切换网络的情况：
typescript复制const { chain } = useNetwork()
useEffect(() => {
if (chain && chain.id !== sepolia.id) {
toast.error('请切换到Sepolia测试网')
}
}, [chain])
4.2 Gas费估算优化
在发起交易前预估Gas费提升用户体验：
typescript复制const { data: gasEstimate } = useFeeData({
formatUnits: 'gwei',
watch: true
})
const { config } = usePrepareContractWrite({
// ...其他配置
gas: gasEstimate?.gasLimit.mul(120).div(100) // 增加20%缓冲
})
4.3 移动端适配要点
Web3 DApp在移动端需要特殊处理：
- 使用
@rainbow-me/rainbowkit的移动端适配组件 - 添加PWA支持：
bash复制yarn add next-pwa
- 在
next.config.js中配置：
javascript复制const withPWA = require('next-pwa')({
dest: 'public',
disable: process.env.NODE_ENV === 'development'
})
module.exports = withPWA({
// Next.js配置
})
5. 部署与生产环境优化
5.1 Vercel部署配置
Next.js应用最方便的部署方式是使用Vercel：
- 创建
vercel.json配置文件：
json复制{
"rewrites": [
{
"source": "/api/:path*",
"destination": "/api/:path*"
}
]
}
- 设置环境变量：
code复制NEXT_PUBLIC_DEFAULT_CHAIN=sepolia
NEXT_PUBLIC_INFURA_ID=your_infura_key
5.2 性能优化技巧
- 动态加载Web3相关组件：
typescript复制import dynamic from 'next/dynamic'
const ConnectButton = dynamic(
() => import('@rainbow-me/rainbowkit').then((c) => c.ConnectButton),
{ ssr: false }
)
- 使用
next/image优化图片加载 - 按需加载区块链网络数据：
typescript复制const { chains } = useChains({
chains: [mainnet, sepolia],
initialChain: sepolia
})
6. 常见问题排查指南
6.1 钱包连接失败
典型错误场景：
-
用户未安装钱包扩展
- 解决方案：显示安装引导
typescript复制const { connector, isConnected } = useAccount() const { connect, connectors, error } = useConnect() if (error?.name === 'ConnectorNotFoundError') { // 显示MetaMask安装链接 } -
错误的网络配置
- 检查
wagmi配置中的chains参数
- 检查
6.2 交易卡顿处理
可能原因及解决方案：
-
Gas费设置过低
- 使用
useFeeData动态调整
- 使用
-
RPC节点响应慢
- 配置备用RPC提供商
typescript复制const { publicClient } = usePublicClient({ chain: sepolia, transport: http('https://rpc.sepolia.org') }) -
前端渲染阻塞
- 使用React Profiler分析性能瓶颈
6.3 合约交互异常
调试步骤：
- 检查合约地址是否正确
- 验证ABI与合约版本匹配
- 使用Etherscan验证合约源码
- 测试网络水龙头获取测试ETH
typescript复制// 调试工具
const { data: contractRead } = useContractRead({
address: nftAddress,
abi: nftAbi,
functionName: 'ownerOf',
args: [1]
})
console.log('Owner of token 1:', contractRead)
7. 安全最佳实践
7.1 前端安全防护
-
防止XSS攻击：
- 使用
next/script加载第三方脚本 - 对用户输入进行严格过滤
- 使用
-
API路由保护：
typescript复制// pages/api/sensitive.ts import { getSession } from 'next-auth/react' export default async function handler(req, res) { const session = await getSession({ req }) if (!session) return res.status(401).end() // 处理逻辑 }
7.2 合约交互安全
-
交易确认提示：
typescript复制const handleMint = () => { if (!confirm('确认支付0.01 ETH铸造NFT？')) return // 执行铸造 } -
金额格式化显示：
typescript复制import { formatEther } from 'viem' <span>{formatEther(price)} ETH</span> -
防重放攻击：
- 在合约中使用nonce机制
- 前端限制重复交易提交
8. 项目扩展方向
8.1 添加NFT展示功能
集成OpenSea API或Alchemy NFT API：
typescript复制const { data: nfts } = useFetch(
`/api/nfts?owner=${address}`,
{ refreshInterval: 10000 }
)
8.2 多链支持实现
配置多链wagmi客户端：
typescript复制const { chains, publicClient } = useClient({
chains: [mainnet, polygon, optimism],
transports: {
[mainnet.id]: http(),
[polygon.id]: http('https://polygon-rpc.com'),
[optimism.id]: http('https://mainnet.optimism.io')
}
})
8.3 添加拍卖功能
扩展合约功能：
solidity复制function createAuction(
uint256 tokenId,
uint256 startingPrice,
uint256 duration
) external {
require(ownerOf[tokenId] == msg.sender, "Not owner");
// 拍卖逻辑
}
对应前端实现竞价界面：
typescript复制const { write: bid } = useContractWrite({
address: auctionAddress,
abi: auctionAbi,
functionName: 'bid',
value: parseEther(bidAmount)
})