microfrontends

Configure and deploy Vercel microfrontends with path-based routing across independent projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Splitting a large frontend application into independently deployable units that render as one cohesive app is complex, requiring routing configuration, asset isolation, local development proxies, and cross-team deployment coordination on Vercel. ## Core Features & Use Cases - Routing Configuration: Define microfrontends.json with default and child applications, path expressions, asset prefixes, and flag-controlled routing via 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. - Group Management: Use the vercel microfrontends CLI to create, inspect, add to, and delete microfrontends groups, plus configure fallback environments and observability routing. - Use Case: A platform team splits a monolithic Next.js app into web, docs, and dashboard projects so each team deploys independently while users see one unified domain. ## Quick Start Ask the assistant to set up a microfrontends group and generate a microfrontends.json routing /docs paths to a separate docs project.

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 a `microfrontends.json` to the default app defining routing paths, install `@vercel/microfrontends` in every app, and wrap each framework config with `withMicrofrontends` before deploying.

How do I run Vercel microfrontends locally?

Use the local development proxy, which listens on port 3024 by default and routes requests between locally running apps and production fallbacks. With Turborepo it starts automatically via `turbo run dev`; otherwise run `microfrontends proxy --local-apps <name>` manually.

Does @vercel/microfrontends support frameworks besides Next.js?

Yes, it supports Next.js App Router and Pages Router, SvelteKit, React Router, and Vite. SvelteKit and Vite integrations are exposed through experimental entry points like `@vercel/microfrontends/experimental/vite`.

How does flag-controlled routing work in microfrontends?

Add a `flag` field to a routing group in `microfrontends.json`, then implement middleware in the default Next.js app using `runMicrofrontendsMiddleware` with flag values. The middleware matcher must include all flagged paths plus `/.well-known/vercel/microfrontends/client-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 app's routing paths.

What path expressions does microfrontends.json routing support?

Supported expressions include constant paths, single-segment wildcards like `/:path`, zero-or-more segments like `/prefix/:path*`, one-or-more segments with `:path+`, alternation, and negative lookahead. Overlapping paths and multi-segment wildcards not at the end are not supported.