@vercel/microfrontends 0.17.1 → 0.17.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vercel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,111 +1,74 @@
 # `@vercel/microfrontends`
 
-Defines configuration and utilities for micro-frontend development.
+Defines configuration and utilities for microfrontends development.
 
 ## Getting started
 
-### Define your `micro-frontend.json` file
+### Define your `microfrontends.json` file
 
-The first step to get started is to define your `micro-frontend.json` file
-listing all the micro-frontend applications in your setup. Since this file will
-be used by all the micro-frontends, you can define it in a new NPM package.
+The first step to get started is to define your `microfrontends.json` file
+listing all the microfrontends applications in your setup. This file should live at the root
+of your default application.
 
-For example, if your configuration is defined in `packages/my-app-micro-frontends-config`,
-then you would define a `micro-frontends.json` at the root.
+For example, if your configuration is defined in `apps/dot-com`,
+then you would define a `apps/dot-com/microfrontends.json` at the root.
 
-```json filename="micro-frontends.json"
+> [!TIP]
+> If you have a long configuration file, comments are supported by using the `.jsonc` extension.
+
+```json filename="microfrontends.jsonc"
 {
-  "version": "1",
+  "$schema": "https://openapi.vercel.sh/microfrontends.json",
   "applications": {
-    "next-site": {
-      "default": true,
-      "development": {
-        "local": {
-          "protocol": "http",
-          "host": "localhost",
-          "port": 3331
-        },
-        "fallback": {
-          "protocol": "https",
-          "host": "nextjs.org"
-        }
+    "dot-com": {
+      "vercel": {
+        "projectId": "prj_123"
       },
       "production": {
-        "protocol": "https",
-        "host": "nextjs.org"
-      },
-      "vercel": {
-        "projectId": "QmbxjYNaxv3Qphmreu8tATuLjwdhJBUxqaXC2fz3CMNwB3",
-        "projectName": "next-site"
+        "host": "my-site.vercel.sh"
       }
     },
-    "nextjs-conf": {
-      "default": false,
-      "routing": {
-        "assetPrefix": "nextjs-conf",
-        "matches": [
-          {
-            "group": "next-conf-pages",
-            "paths": ["/conf", "/conf/:path*"]
-          }
-        ]
+    "docs": {
+      "vercel": {
+        "projectId": "prj_456"
       },
-      "development": {
-        "fallback": {
-          "protocol": "https",
-          "host": "nextjs-conf.vercel.sh"
-        },
-        "local": {
-          "protocol": "http",
-          "host": "localhost",
-          "port": 3000
+      "routing": [
+        {
+          "group": "all_pages",
+          "paths": ["/docs/:path*"]
         }
-      },
-      "production": {
-        "protocol": "https",
-        "host": "nextjs.org"
-      },
+      ]
+    },
+    "admin": {
       "vercel": {
-        "projectId": "prj_iv3tCRmwhF1ETZx2rH9NeoJJsoOc",
-        "projectName": "nextjs-conf"
-      }
+        "projectId": "prj_789"
+      },
+      "routing": [
+        {
+          "group": "all_pages",
+          "paths": ["/admin/:path*"]
+        }
+      ]
     }
   }
 }
 ```
 
-In the `package.json` for the package, add the `micro-frontends.json` file to
-the `files` attribute.
-
-```json filename="package.json"
-{
-  "name": "my-app-micro-frontends-config",
-  "files": ["micro-frontends.json"]
-}
-```
-
-### Set up Micro-Frontends in each Next.js application
+### Set up Microfrontends in each Next.js application
 
 #### `next.config.js`
 
 In the `next.config.js` configuration for your application, wrap your config
-with the `withMicrofrontends` function specifying the `micro-frontends.json`
-config that you created above.
+with the `withMicrofrontends` function.
 
-```js filename="next.config.js"
-const { withMicrofrontends } = require('@vercel/microfrontends/next/config');
+```js filename="next.config.ts"
+import { withMicrofrontends } from '@vercel/microfrontends/next/config';
 
 const nextConfig = {
   // ...
 };
 
-module.exports = withMicrofrontends(
-  nextConfig,
-  path.join(
-    __dirname,
-    'node_modules/my-app-micro-frontends-config/micro-frontends.json',
-  ),
-);
+export default withMicrofrontends(nextConfig);
 ```
 
 This will set up the necessary environment variables and `rewrites` for the
@@ -113,8 +76,8 @@ application.
 
 #### Middleware
 
-Next you have to include the micro-frontends middleware. You can run this code
-in your middleware to apply the micro-frontends routing logic.
+Next you have to include the microfrontends middleware. You can run this code
+in your middleware to apply the microfrontends routing logic.
 
 ```typescript filename="middleware.ts"
 import { runMicrofrontendsMiddleware } from '@vercel/microfrontends/next/middleware';
@@ -132,26 +95,22 @@ export async function middleware(
 
 #### `.well-known` API endpoints
 
-The Micro-Frontends features rely on information exposed in two `.well-known`
+The Micro-Frontends features rely on information exposed in `.well-known`
 endpoints:
 
-- `/.well-known/vercel/micro-frontends/server-config`
 - `/.well-known/vercel/microfrontends/client-config`
 
 You must define API handlers for these two routes to serve the information to
 the client and Vercel Toolbar for Micro-Frontends features to work.
 
-If you are using App Router, add a file under the `app/.well-known/vercel/micro-frontends/server-config/route.ts`
-file:
+If you are using App Router, add a file under the `app/.well-known/vercel/microfrontends/client-config/route.ts` file:
 
-```typescript filename="app/.well-known/vercel/micro-frontends/server-config/route.ts"
-export { wellKnownNextjsServerConfigAppRoute as GET } from '@vercel/microfrontends/next/endpoints';
-```
+```typescript filename="app/.well-known/vercel/micrfrontends/client-config/route.ts"
+import { wellKnownNextjsClientConfigAppRoute } from '@vercel/microfrontends/next/endpoints';
 
-Then do the same for `app/.well-known/vercel/microfrontends/client-config/route.ts`:
-
-```typescript filename
-export { wellKnownNextjsClientConfigAppRoute as GET } from '@vercel/microfrontends/next/endpoints';
+export async function GET(): Promise<Response> {
+  return wellKnownNextjsClientConfigAppRoute();
+}
 ```
 
 #### Client-side link navigation and prefetching