手把手教你用 Next.js 搭建 Solana NFT 铸造网站
本文将详细介绍如何使用 Next.js 15 + Solana Web3.js + Metaplex 构建一个完整的 NFT 铸造网站
前言
大家好，我是 hyy。最近在研究 Web3 相关技术，正好借这个机会分享一下如何使用 Next.js 搭建一个 Solana NFT 铸造网站。这个项目包含了完整的钱包连接、NFT 铸造等功能，并且支持中英文国际化。
在线预览
技术选型
首先介绍一下项目用到的主要技术栈：
- Next.js 15.1: 选择最新的 Next.js 版本，使用 App Router 架构
- React 19: 最新的 React 版本
- Solana Web3.js: Solana 区块链交互的核心库
- Metaplex: 使用 Candy Machine v3 来实现 NFT 铸造
- TailwindCSS: 原子化 CSS 框架，用于快速构建 UI
- TypeScript: 提供类型安全
- i18next: 实现国际化
项目初始化
首先创建项目并安装依赖：
git clone https://github.com/coderhyy/monkey-kingdom-next.git
cd monkey-kingdom-next
pnpm install
项目结构
项目的主要目录结构如下：
.
├── app # Next.js App Router 目录
│ ├── [lng] # 动态路由 (国际化)
│ ├── i18n # 国际化配置
│ └── lib # 工具函数
├── components # 全局共享组件
└── public # 静态资源
核心功能实现
1. 国际化配置
使用 i18next 实现国际化，主要代码在：
export const fallbackLng = "en";
export const languages = [fallbackLng, "zh"];
export const defaultNS = "translation";
export const cookieName = "i18next";
export function getOptions(
lng = fallbackLng,
ns: string | string[] = defaultNS
) {
return {
defaultNS,
// preload: languages,
fallbackLng,
fallbackNS: defaultNS,
lng,
ns,
// debug: true,
supportedLngs: languages,
};
}
2. Solana 钱包集成
钱包连接是通过 @solana/wallet-adapter 实现的：
export function SolanaProvider({ children }: { children: React.ReactNode }) {
const { cluster } = useCluster();
const endpoint = useMemo(() => cluster.endpoint, [cluster]);
const onError = useCallback((error: WalletError) => {
console.error(error);
}, []);
return (
<>
<ConnectionProvider endpoint={endpoint}>
<WalletProvider autoConnect onError={onError} wallets={[]}>
<WalletModalProvider>{children}</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
</>
);
}
3. NFT 铸造功能
铸造功能的核心实现：
const handleMint = useCallback(async () => {
if (!candyMachine) return;
setIsLoading(true);
try {
const transaction = buildMintTransaction();
if (!transaction) throw new Error("Failed to build transaction");
await transaction.sendAndConfirm(umi);
toast.success(t("mintSuccess"));
await Promise.all([getBalance(), getCandyMachine()]);
} catch (error) {
toast.error(error instanceof Error ? t("mintError") : t("unknownError"));
} finally {
setIsLoading(false);
}
}, [buildMintTransaction, candyMachine, getBalance, getCandyMachine, t, umi]);
4. UI 设计
项目使用 TailwindCSS 实现响应式设计，深色模式配置：
@media (prefers-color-scheme: dark) {
:root {
--primary: #7c4dff;
--primary-hover: #8c6fff;
--primary-active: #673ab7;
--background: #0a0a0a;
--background-secondary: #1a1a1a;
--foreground: #ededed;
--foreground-secondary: #a0a0a0;
--border: #333333;
}
}
遇到的问题和解决方案
-
Solana 钱包连接问题
- 问题：浏览器环境下 Phantom 钱包连接失败
- 解决：确保在客户端渲染钱包组件，使用 Next.js 的 dynamic import
-
国际化路由问题
- 问题：刷新页面后语言设置丢失
- 解决：使用 middleware 处理语言重定向
-
Candy Machine 集成问题
- 问题：铸造交易失败
- 解决：增加计算单元限制，设置
COMPUTE_UNITS = 800_000
部署
推荐使用 Vercel 部署，只需要几个简单步骤：
- 在 Vercel 创建新项目
- 导入 GitHub 仓库
- 配置环境变量
- 点击部署
后续优化计划
- 支持更多钱包
- 优化移动端体验
- 添加更多语言支持
- 集成 NFT 交易市场
结语
通过这个项目，我们不仅学习了如何使用 Next.js 构建现代化的 Web 应用，还掌握了 Solana 生态系统的开发技能。希望这篇文章对大家有帮助！
如果你对这个项目感兴趣，欢迎访问 GitHub 仓库 并给个 Star ⭐️
