> ## 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 > dapps को बनाने, staging और demoing के दौरान Dynamic UI kit के साथ Virtual Environments को कॉन्फ़िगर करना सीखें। इस गाइड में आप सीखेंगे कि Dynamic का उपयोग करके Next.js app को [Virtual Environments](/virtual-environments/overview) से कैसे कनेक्ट करें। [Dynamic](https://docs.dynamic.xyz) login flows और onboarding अनुभव बनाने के लिए एक UI kit है। आप अपने dap को demo करते समय और UI का निर्माण करते समय staged smart contracts के साथ इंटरैक्ट करने के लिए Dynamic को Virtual Environments से कनेक्ट कर सकते हैं। Dynamic आंतरिक रूप से Wagmi को wrap करता है, इसलिए आप इस setup को [Wagmi integration](/virtual-environments/dapp-ui/wagmi) के साथ भी जोड़ सकते हैं। ### Virtual Environment बनाएं Tenderly Dashboard में, एक नया Virtual Environment बनाएं: * Mainnet को base network के रूप में चुनें * इसे `Dynamic Virtual Environment` नाम दें * एक अद्वितीय chain ID **`73571`** चुनें * **Public Explorer** चालू करें * **Virtual Environment RPC** कॉपी करें ### Chain Config बनाएं एक file `src/tenderly.config.ts` बनाएं और निम्न को बदलें: 1. chain ID को `id` property में पेस्ट करें 2. chainNname और currency बदलें 3. **`rpcUrls`** में **Virtual Environment RPC** पेस्ट करें 4. **`blockExplorerUrls`** में **Block Explorer URL** पेस्ट करें ```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 में wrap करें अपने app (या एक component) को `DynamicContextProvider` में wrap करें, पहले परिभाषित `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 ```