skills.rest
worldcoin
worldcoinOFFICIAL
Explore all skills by this author →
Website𝕏@worldcoinGitHub

web-to-miniapp

Migrate Next.js web apps to World App mini apps with MiniKit and viem.

88|75|Updated Apr 10, 2024
Search Tags:#nextjs#ssr#migrate#wallet#minikit#web-to-miniapp#world-app
One-click install
npx skills add https://github.com/worldcoin/minikit-js --skill web-to-miniapp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-to-miniapp
Source: https://github.com/worldcoin/minikit-js/tree/main/skills/web-to-miniapp
Command: npx skills add https://github.com/worldcoin/minikit-js --skill web-to-miniapp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts an existing Next.js web app to a World App mini app by applying MiniKit integration and provider setup, enabling code reuse and consistent UX across environments.

Core Features & Use Cases

  • Step-by-step migration guidance from Next.js web apps to World App mini apps, including server rendering considerations.
  • Setup of MiniKit provider and dual-provider wallet connection to support world app and web wallets.
  • Guidance on handling SSR, dynamic imports, and atomic transaction workflows using MiniKit and viem in real-world projects.

Quick Start

Follow the migration steps to adapt your web app to a World App mini app.

Frequently Asked Questions about web-to-miniapp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a Next.js web app to a World App mini app?▼

To migrate a Next.js web app to a World App mini app, apply MiniKit integration and provider setup to enable code reuse and consistent UX across web and World App environments using step-by-step SSR adjustments.

How does SSR handling work when converting a web app to a World App mini app?▼

SSR handling during web app to World App mini app migration involves dynamic imports and server rendering considerations to ensure MiniKit and dual-provider wallet connectivity function correctly across environments without breaking the existing Next.js server-side logic.

Can I use MiniKit with dual-provider wallet connectivity for web and World App environments?▼

Yes, you can use MiniKit to establish dual-provider wallet connectivity. This setup supports both web wallets and World App wallets, allowing your migrated Next.js application to maintain consistent wallet interactions across different platforms.

What's the best way to handle atomic transaction workflows in a World App mini app?▼

The best way to handle atomic transaction workflows in a World App mini app is by orchestrating transactions using MiniKit and viem, ensuring consistent execution logic across both web and World App environments after migration.

Do I need to adjust dynamic imports when migrating to a World App mini app?▼

Yes, adjusting dynamic imports is necessary when migrating to a World App mini app to properly handle server-side rendering changes and ensure MiniKit providers load correctly without causing hydration or rendering errors in Next.js.

Related Skills

Explore More Software Engineering Skills→
Dargon789Dargon789
3

migrating-an-onchainkit-app

Migrate OnchainKit applications to wagmi/viem components.

Community
Intermediate
worldcoinworldcoin
88

miniapp-to-web

Migrate a World App mini app to a standalone web app with Wagmi fallback.

Official
Advanced
basebase
104

migrating-an-onchainkit-app

Migrate dApps from @coinbase/onchainkit to wagmi and viem.

Official
Advanced
pelithpelith

wagmi

Integrate Ethereum wallets and contract interactions in React apps using Wagmi v3.

Official
Intermediate