microfrontends

Configure and deploy microfrontends on Vercel using microfrontends.json and @vercel/microfrontends.

Updated Sep 10, 2026
One-click install
npx skills add https://github.com/sharad07072007/paras --skill microfrontends-sharad07072007
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: microfrontends
Source: https://github.com/sharad07072007/paras/tree/main/.agents/plugins/vercel/skills/microfrontends
Command: npx skills add https://github.com/sharad07072007/paras --skill microfrontends-sharad07072007

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vercel/microfrontends, and includes references (resource) components.

What problem does it solve? Splitting a large frontend into independently deployable applications that render as one cohesive app requires coordinating routing, asset prefixes, local development proxies, and cross-app navigation across multiple Vercel projects. ## Core Features & Use Cases - Routing Configuration: Define path-based routing between a default app and child apps via microfrontends.json, including flag-controlled routing with Next.js middleware. - Local Development Proxy: Run only the microfrontend you are working on while the proxy routes other requests to production fallbacks, with Turborepo and polyrepo support. - CLI Group Management: Create, inspect, and delete microfrontends groups and add or remove projects using the vercel microfrontends CLI. - Use Case: A team splits a monolithic Next.js app into a marketing site and a docs app, configures /docs/:path* routing in microfrontends.json, and develops locally against production fallbacks through the proxy on port 3024. ## Quick Start Ask the assistant to set up a microfrontends group and generate a microfrontends.json routing configuration for your Vercel projects.

Frequently Asked Questions about microfrontends

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

FAQPage Schema
How do I set up microfrontends on Vercel?

Create a microfrontends group with vercel microfrontends create-group, add microfrontends.json to the default app, install @vercel/microfrontends in every app, and wrap each framework config with withMicrofrontends. Routing takes effect once the config deploys to production.

How do I route paths between Vercel microfrontends?

Add a routing array to the child app in microfrontends.json with path expressions like /docs/:path*. Vercel routes matching requests at the network layer once the config deploys. Use flags with middleware for controlled rollouts.

Which frameworks does @vercel/microfrontends support?

It supports Next.js App Router and Pages Router via withMicrofrontends, plus SvelteKit, React Router, and Vite through experimental integrations. Flag-controlled routing and cross-zone prefetching are currently Next.js only.

How do I run Vercel microfrontends locally?

Start each dev server with next dev --port $(microfrontends port) and run the local proxy with microfrontends proxy --local-apps <names>. With Turborepo 2.3.6+, turbo run dev starts the proxy automatically; polyrepos need vercel microfrontends pull or VC_MICROFRONTENDS_CONFIG.

Why are my microfrontend assets returning 404 errors?

Asset 404s usually mean the asset prefix is not routed in microfrontends.json or Next.js public/ files were not moved into a subdirectory matching the prefix. Verify withMicrofrontends is applied and the prefix path is included in the routing paths.

How does deployment protection work with microfrontends?

Requests through the default app's domain are verified only by the default app's Deployment Protection, while direct child app URLs use the child's settings. For local fallbacks to protected deployments, share VERCEL_AUTOMATION_BYPASS_SECRET across all projects.