docs(nextjs): Add vercel specific microfrontends guide (#15520)

Adds micro frontends guide specific to [vercel's microfrontends
feature](https://vercel.com/docs/microfrontends) since it has multi-zone
application support which doesn't require the use of module federation.

---------

Co-authored-by: Sarah Mischinger <[email protected]>

Author: logaretm

docs/platforms/javascript/common/best-practices/micro-frontends.mdx

@@ -33,11 +33,39 @@ If your app uses micro frontends, it's very useful to be able to track which one
 
 Below you'll find setup instructions for both an automatic and a manual way to route errors to different Sentry projects.
 
+<PlatformSection supported={["javascript.nextjs"]}>
+
+## Vercel Multi-Zone Micro Frontends
+
+Vercel's multi-zone applications let you slice a large app into smaller, independently managed projects. Each project operates as its own application, with its own UI and tech stack. For example, you might use Next.js for one project, SvelteKit for another, and React for a third.
+
+To set up Sentry in a multi-zone setup, configure Sentry separately within each project. Follow the installation steps for the framework each project uses. Here are a few examples:
+
+- **[Next.js](/platforms/javascript/guides/nextjs/)**
+- **[React](/platforms/javascript/guides/react/)**
+- **[SvelteKit](/platforms/javascript/guides/sveltekit/)**
+
+We recommend using a different DSN for each project. This makes it easier to
+identify which project errors are coming from, helping you track issues and
+fix them faster in complex frontend architectures.
+
+<Alert>
+  With the exception of Vercel multi-zone micro frontends, you should call
+  `Sentry.init()` only once in your application. Initializing Sentry multiple
+  times can lead to unexpected behavior.
+</Alert>
+
+</PlatformSection>
+
+<PlatformSection notSupported={["javascript.nextjs"]}>
+
 <Alert>
   In all cases `Sentry.init()` must never be called more than once, doing so
   will result in undefined behavior.
 </Alert>
 
+</PlatformSection>
+
 ## Automatically Route Errors to Different Projects
 
 `ModuleMetadata` and `makeMultiplexedTransport` can be used together to automatically route events to specific Sentry projects that represent your micro frontend services. Events will be routed once the service where the error occurred has been identified, ensuring errors are tracked in the correct project.
@@ -75,7 +103,8 @@ module.exports = {
 ```
 
 <Alert>
-  **Replace `__MODULE_DSN__` with your actual Sentry project DSN.** You can find your DSN in your Sentry project settings under Client Keys (DSN).
+  **Replace `__MODULE_DSN__` with your actual Sentry project DSN.** You can find
+  your DSN in your Sentry project settings under Client Keys (DSN).
 </Alert>
 
 Once metadata has been injected into modules, the `moduleMetadataIntegration`
@@ -203,7 +232,9 @@ init({
 ```
 
 <Alert>
-  **Replace `__DEFAULT_DSN__` with your actual Sentry project DSN.** This should be the DSN for your default/fallback Sentry project. You can find your DSN in your Sentry project settings under Client Keys (DSN).
+  **Replace `__DEFAULT_DSN__` with your actual Sentry project DSN.** This should
+  be the DSN for your default/fallback Sentry project. You can find your DSN in
+  your Sentry project settings under Client Keys (DSN).
 </Alert>
 
 Once this is set up, errors - both handled and unhandled - will be automatically routed to the right project.
@@ -257,7 +288,8 @@ init({
   - Replace `__CART_DSN__` with the DSN for your cart micro frontend's Sentry project
   - Replace `__GALLERY_DSN__` with the DSN for your gallery micro frontend's Sentry project
 
-  You can find your DSNs in each Sentry project's settings under Client Keys (DSN).
+You can find your DSNs in each Sentry project's settings under Client Keys (DSN).
+
 </Alert>
 
 You can then set tags/contexts on events in individual micro-frontends to decide which Sentry project to send the event to as follows:

docs/platforms/javascript/guides/nextjs/index.mdx

@@ -217,6 +217,7 @@ Our next recommended steps for you are:
 - Learn how to [manually capture errors](/platforms/javascript/guides/nextjs/usage/)
 - Continue to [customize your configuration](/platforms/javascript/guides/nextjs/configuration/)
 - Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
+- Learn how to [set up Sentry for Vercel's micro frontends](/platforms/javascript/guides/nextjs/best-practices/micro-frontends/)
 - Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/)
 
 <Expandable permalink={false} title="Are you having problems setting up the SDK?">