> ## 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 > Узнайте, как настроить Virtual Environments с UI-набором Dynamic при разработке, стейджинге и демонстрации dapp. В этом руководстве вы узнаете, как подключить приложение на Next.js к [Virtual Environments](/virtual-environments/overview) с помощью Dynamic. [Dynamic](https://docs.dynamic.xyz) — это UI-набор для построения потоков входа и онбординга. Вы можете подключить Dynamic к Virtual Environments, чтобы взаимодействовать со развёрнутыми в стейджинге смарт-контрактами при демонстрации dapp и разработке UI. Dynamic внутренне оборачивает Wagmi, поэтому эту связку можно комбинировать с [интеграцией Wagmi](/virtual-environments/dapp-ui/wagmi). ### Создайте Virtual Environment В Tenderly Dashboard создайте новую Virtual Environment: * Выберите Mainnet как базовую сеть * Назовите её `Dynamic Virtual Environment` * Выберите уникальный chain ID **`73571`** * Включите **Public Explorer** * Скопируйте **Virtual Environment RPC** ### Создайте конфигурацию цепочки Создайте файл `src/tenderly.config.ts` и замените следующее: 1. Вставьте chain ID в свойство `id` 2. Измените имя цепочки и валюту 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', }, ]; ``` ### Оберните ваш dapp в DynamicContextProvider Оберните ваше приложение (или компонент) в `DynamicContextProvider`, настройте **`evmNetworks`** с помощью ранее определённых `tenderlyChains`. ```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 ```