> ## Documentation Index > Fetch the complete documentation index at: https://docs.tenderly.co/llms.txt > Use this file to discover all available pages before exploring further. # Dynamic > 了解如何在构建、暂存和演示 dapp 时使用 Dynamic UI kit 配置 Virtual Environments。在本指南中，您将学习如何使用 Dynamic 将 Next.js 应用连接到 [Virtual Environments](/virtual-environments/overview)。 [Dynamic](https://docs.dynamic.xyz) 是一个用于构建登录流程和引导体验的 UI kit。您可以将 Dynamic 连接到 Virtual Environments，在构建 UI 和演示 dapp 时与暂存的智能合约交互。Dynamic 内部封装了 Wagmi，因此您也可以将此设置与 [Wagmi 集成](/virtual-environments/dapp-ui/wagmi)搭配使用。 ### 创建 Virtual Environment 在 Tenderly Dashboard 中创建一个新的 Virtual Environment： * 选择 Mainnet 作为基础网络 * 命名为 `Dynamic Virtual Environment` * 选择唯一的链 ID **`73571`** * 打开 **Public Explorer** * 复制 **Virtual Environment RPC** ### 创建链配置创建一个文件 `src/tenderly.config.ts` 并替换以下内容： 1. 将链 ID 粘贴到 `id` 属性 2. 更改 chainName 和货币 3. 将 **Virtual Environment RPC** 粘贴到 **`rpcUrls`** 4. 将 **Block Explorer URL** 粘贴到 **`blockExplorerUrls`** ```typescript showLineNumbers title="src/tenderly.config.ts" lines={3-6} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} export const tenderlyChains = [ { blockExplorerUrls: ['https://dashboard.tenderly.co/explorer/vnet/47cdac98-cda3-431a-8fce-9f31037a3d0c'], chainId: 73571, chainName: 'Virtual Ethereum Mainnet', iconUrls: ['https://app.dynamic.xyz/images/networks/eth.svg'], name: 'Ethereum', nativeCurrency: { decimals: 18, name: 'Ether', symbol: 'ETH', }, networkId: 1, rpcUrls: [process.env.TENDERLY_VIRTUAL_MAINNET_RPC!], vanityName: 'Virtual ETH Mainnet', }, ]; ``` ### 在 DynamicContextProvider 中包装您的 dapp 将您的应用（或组件）包装在 `DynamicContextProvider` 中，使用之前定义的 `tenderlyChains` 配置 **`evmNetworks`**。 ```tsx showLineNumbers title="app/layout.tsx" lines={17} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} 'use client'; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### 运行 dapp ```bash theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev ```