2023年创建Web3前端项目全教程（Next.js13）

一眨眼2023年年中了，Web3的前端世界迎来了一系列的更新迭代，曾经要想在前端与区块链（EVM兼容）交互只有两个选择 Web3.js 和 Ethers.js，如今多了一个强力的竞争者 - Viem，并且有后来居上的劲头。而我们熟悉的 WalletConnect 也正是弃用了v1，并开始大力推广v2。虽然处在熊市热度不多，但产品的更新迭代反而是更多了。能用的工具太多了，整体的生态也在不断完善，现在开始一个Web3项目从来没有如此简单过，这篇文章会交大家怎么用Next.js13新建一个Web3项目，并且会分享途中遇到的一些问题的解决办法，帮助大家快速起步！

选择连接钱包插件

市面上的钱包产品多不胜数，要想与每一个钱包对接当然是可行的，但对于大部分的项目来说与其从零开始造轮子不如用现有的解决办法。根据我的观察市面上一共有三款成熟的解决方案可以选择，下面我们分别介绍一下。

Wallet Connect - Web3Modal

https://walletconnect.com/

作为一个老牌的Protocol，它们支持了超过三百个钱包，并且为开发者提供了非常方便的SDK和文档。最近也正式弃用v1，正式推广v2了。不仅仅如此，曾经红极一时的一款叫做Web3Modal 的开源项目也被WalletConnect收购了，随着而来的是推出了更加强大和个性化的Web3Modal v2。

Web3Modal有分为普通的html版本和React版本，所以理论上支持任何框架。支持如果用React会更方便而已。React版本简历在 Wagmi 和前面提到的 Viem 之上，除此之外只需要简单几步就能为你的dApp带来连接钱包的功能并且通过Wagmi开放了非常多的React hook。

ConnectKit by Family

https://github.com/family/connectkit

同样背靠大公司，ConnectKit作为一个开源项目，同样也是建立在 Wagmi 和 Viem 上，并且默认支持 WalletConnect，所以理论上WalletConnect支持的他们也支持。遗憾的是ConnectKit暂时只支持React，但是对比Web3Modal最大的优点就是简洁！实在是太简洁了，而且使用体验丝滑，且比较容易定制化来迎合你的产品的branding。

其他真的找不出啥大区别，完全取决于你的个人喜好了

RainbowKit

https://www.rainbowkit.com/

最后就是Rainbow🌈钱包推出的RainbowKit，最新版本也是建立在建立在 Wagmi 和 Viem 上，同样支持WalletConnect，同样的仅支持React。

选择什么连接钱包的SDK，取决于你用的是什么前端框架，如果不是React，那么还是默认Web3Modal吧。如果是React的话，真的完完全全看个人选择了，因为底层使用的都是Wagmi所以使用体验上都大抵相同。

选择链上交互插件

大概在一年前基本只有两个选择：Web3.js 和 Ethers.js，前者非常老了且非常难用，后者稍微新一点但是也已经有点过时了，两个包尺寸都偏大且非常不现代化。幸好现在有了 Viem ，一个只有 35kB、拥有100% test covergae、且有TS support的开源包，实在是无可挑剔。如果你使用的是React，那么可以直接使用 Wagmi，因为它直接就提供了多个现成的React hook使用，且底层也是使用的Viem。

👀

其实 Viem是由Wagmi开发，在Wagmi旧的版本其实使用的是 Ethers.js，但苦于 ethers.js属于维护与更新，所以他们团队决定自己开发一个与EVM链交互的包，事实证明他们也成功了。

选择什么包，目前个人默认推荐的是 Viem，如果是使用React，直接 Wagmi + Viem走起！

新建项目

新建Next.js项目

准备工作做好，我们也正式开始新建项目，我们在这里会使用最新的 Next13 来新建项目，并且使用 Next 最新的 App directory，我们在这里会按照 Next.js 的官方文档的步骤走。

💡

无论如何你平时喜欢用什么框架，React 和 Next.js目前来说基本就是Web3项目标配，因为能用的插件太多了，让我们不需要从头造轮子。

我们新建好项目文件夹，直接在终端输入一下以下指令

npx create-next-app@latest

接着根据自己项目的需要填写项目的配置，个人推荐使用TypeScript、和App Router。

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes

安装完成后我们就正式有一个Next13的项目了。

安装连接钱包插件

接着我们安装前面选定的连接钱包插件，这里以 WalletConnect 的 Web3Modal React 版本为例（官方文档这里）。

我们继续在终端运行指令，确保已进入项目的根目录，运行以下指令安装包

npm install @web3modal/ethereum @web3modal/react wagmi viem

可以看到我们不仅仅安装了Web3Modal，也安装了Wagmi和Viem，所以后续如果有需要与合约交互等久不需要安装额外的包了，直接使用Wagmi或者Viem即可。

新版本的WalletConnect要求所有项目都得申请一个project id，不过很简单，我们只需要在WalletConnect的后台新建一个项目即可获取。

后台地址：https://cloud.walletconnect.com/app

获取到project id后，我们回到项目根目录新建一个 .env.local 文件夹，用于存储我们本地开发的环境变量。

路径：./.env.local

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="YOUR_PROJECT_ID"

💡

注意需要在前面加上 NEXTPUBLIC 这样子这个环境变量才能被前端读取

配置Web3Modal和Wagmi

东西都安装好了，接下来我们可以在项目内配置Web3Modal，不过按照官方文档直接在layout.tsx 添加配置是会报错的，因为Next.js默认是服务器渲染，而我们使用的任何连接钱包的插件都是仅支持客户端渲染（因为需要读取前端浏览器内的钱包插件），解决办法也比较容易，我们需要把所有相关的Config统一放在一个独立的component，然后通过最新的 "use client"来标记其为仅客户端渲染。

接下来，新建一个文件，这里我根据自己的喜好放在下面的路径 👇🏻

路径：./app/_providers/Web3ModalProvider.tsx

"use client"
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/react'
import React from 'react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { arbitrum, mainnet, polygon } from 'wagmi/chains'

const chains = [arbitrum, mainnet, polygon]
const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID

type Web3ModalProviderType = {
    children: React.ReactNode
};

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, chains }),
    publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)

const Web3ModalProvider = ({ children }: Web3ModalProviderType) => {
    return (
        <>
            <WagmiConfig config={wagmiConfig}>
                {children}
            </WagmiConfig>
            <Web3Modal projectId={projectId} ethereumClient={ethereumClient}/>
        </>
    )
}

export default Web3ModalProvider

接下来需要修改根layout文件，引入新建的Web3ModalProvider，修改后我们的layout应该长下面这样

路径：./app/layout.tsx

import './globals.css'
import Web3ModalProvider from './_providers/Web3ModalProvider'

export const metadata = {
  title: 'Your project',
  description: 'Your project description',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Web3ModalProvider>
          {children}
        </Web3ModalProvider>
      </body>
    </html>
  )
}

最后的最后，我们把默认的 page.tsx 清理一下，看看行不行。

路径：./app/page.tsx

export default function Home() {
  return (
    <div>
         Hello World
    </div>
  )
}

我们运行指令开启本地开发环境

npm run dev

可以看到页面正常加载了，且没有报错，太棒了！

在前端看起来没问题，但是在终端内却出现了非常多类似下面这样的报错，经过一番研究应该是新版本的Next13无法区分客户端和服务器端的依赖，不知道未来是否会修复，但是不影响开发使用。

warn  - ./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '/home/runner/walletconnect-issue/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js'

Import trace for requested module:
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
./node_modules/@walletconnect/sign-client/node_modules/@walletconnect/core/dist/index.cjs.js
./node_modules/@walletconnect/sign-client/dist/index.cjs.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx

./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/home/runner/walletconnect-issue/node_modules/cross-fetch/node_modules/node-fetch/lib'

Import trace for requested module:
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
./node_modules/@walletconnect/ethereum-provider/dist/cjs/index.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/home/runner/walletconnect-issue/node_modules/pino/lib'

Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx

要想消除错误，只需要修改一下next config。

路径：./next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  webpack: (config) => {
    config.externals.push("pino-pretty", "lokijs", "encoding");
    return config;
  },
};

module.exports = nextConfig;

💡

在项目导入.env环境变量的时候如果看到类似下面这样的错误，我们只需要根目录新建一个additional-env.d.ts告诉TS我们它我们额外的环境变量即可消除这个报错。

路径：./additional-env.d.ts

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NODE_ENV: "development" | "production";
      NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: string;
    }
  }
}

export {};

添加连接钱包按钮

接下来就是添加连接钱包的按钮了，Web3Modal直接开盒提供了现成的按钮，我们直接导入就好。同理由于连接钱包按钮仅支持客户端渲染，我们不能直接在 page.tsx 导入，需要新建一个client component。

路径：./app/(components)/ConnectWalletBtn.tsx

"use client"
import { Web3Button } from '@web3modal/react'

function ConnectWalletBtn() {
    return <Web3Button />
}

export default ConnectWalletBtn

历经了这么多问题，我们终于能看到 Connect Wallet按钮了！！！点击后也能正常连接钱包，太棒了！

最后的最后

到此为止，我们成功地新建了一个Next.js13的项目，并且成功配置了Web3Modal (WalletConnect)、Wagmi和Viem，且能正常连接钱包了！！！虽然途中遇到了一些问题，但我们也顺利解决了。这篇文章可以看起来不够清晰，我已经把本篇文章的Sample项目建了一个仓库，需要自取 👇🏻

https://github.com/DbgKinggg/next13-web3-modal-starter-kit

最后，非常感谢大家的支持！祝大家buidl愉快~

Command Palette

Comments (1)