test(nextjs-mf): extract app-router fixtures

Author: ScriptedAlchemy

.changeset/tall-buses-explode.md

@@ -0,0 +1,13 @@
+---
+'@module-federation/nextjs-mf': patch
+'@module-federation/node': patch
+'@module-federation/enhanced': patch
+'@module-federation/manifest': patch
+'@module-federation/modern-js': patch
+'@module-federation/modern-js-v3': patch
+'@module-federation/sdk': patch
+---
+
+Stabilize the Next.js v9 integration path with improved Next.js 16/RSC behavior, hydration handling, and E2E coverage.
+
+This also aligns supporting runtime/build plumbing across Node runtime helpers, enhanced runtime/container hooks, manifest generation, Modern.js integrations, and SDK webpack-path normalization used by these flows.

apps/next-app-router/next-app-router-4000/app/context/context-click-counter.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useCounter } from './counter-context';
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Boundary } from '#/ui/boundary';
-import dynamic from 'next/dynamic';
-const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
+
+const Button = React.lazy(() => import('remote_4001/Button'));
 
 const ContextClickCounter = () => {
   const [count, setCount] = useCounter();
@@ -16,7 +16,15 @@ const ContextClickCounter = () => {
       size="small"
       animateRerendering={false}
     >
-      <Button>testing</Button>
+      <Suspense
+        fallback={
+          <button className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 hover:bg-gray-500 hover:text-white">
+            testing
+          </button>
+        }
+      >
+        <Button>testing</Button>
+      </Suspense>
       <button
         onClick={() => setCount(count + 1)}
         className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium tabular-nums text-gray-100 hover:bg-gray-500 hover:text-white"

apps/next-app-router/next-app-router-4000/app/error-handling/[categorySlug]/[subCategorySlug]/error.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from 'remote_4001/Button';
-import React from 'react';
+import React, { Suspense } from 'react';
+
+const Button = React.lazy(() => import('remote_4001/Button'));
 
 export default function Error({ error, reset }: any) {
   React.useEffect(() => {
@@ -18,7 +19,15 @@ export default function Error({ error, reset }: any) {
         <h2 className="text-lg font-bold">Error</h2>
         <p className="text-sm">{error?.message}</p>
         <div>
-          <Button onClick={() => reset()}>Try Again</Button>
+          <Suspense
+            fallback={
+              <button className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 hover:bg-gray-500 hover:text-white">
+                Try Again
+              </button>
+            }
+          >
+            <Button onClick={() => reset()}>Try Again</Button>
+          </Suspense>
         </div>
       </div>
     </Boundary>

apps/next-app-router/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from 'remote_4001/Button';
-import React from 'react';
+import React, { Suspense } from 'react';
+
+const Button = React.lazy(() => import('remote_4001/Button'));
 
 export default function Error({ error, reset }: any) {
   React.useEffect(() => {
@@ -15,7 +16,15 @@ export default function Error({ error, reset }: any) {
         <h2 className="text-lg font-bold">Error</h2>
         <p className="text-sm">{error?.message}</p>
         <div>
-          <Button onClick={() => reset()}>Try Again</Button>
+          <Suspense
+            fallback={
+              <button className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 hover:bg-gray-500 hover:text-white">
+                Try Again
+              </button>
+            }
+          >
+            <Button onClick={() => reset()}>Try Again</Button>
+          </Suspense>
         </div>
       </div>
     </Boundary>

apps/next-app-router/next-app-router-4000/app/error-handling/error.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from 'remote_4001/Button';
-import React from 'react';
+import React, { Suspense } from 'react';
+
+const Button = React.lazy(() => import('remote_4001/Button'));
 
 export default function Error({ error, reset }: any) {
   React.useEffect(() => {
@@ -15,7 +16,15 @@ export default function Error({ error, reset }: any) {
         <h2 className="text-lg font-bold">Error</h2>
         <p className="text-sm">{error?.message}</p>
         <div>
-          <Button onClick={() => reset()}>Try Again</Button>
+          <Suspense
+            fallback={
+              <button className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 hover:bg-gray-500 hover:text-white">
+                Try Again
+              </button>
+            }
+          >
+            <Button onClick={() => reset()}>Try Again</Button>
+          </Suspense>
         </div>
       </div>
     </Boundary>

apps/next-app-router/next-app-router-4000/app/page.tsx

@@ -1,12 +1,13 @@
 import { demos } from '#/lib/demos';
 import Link from 'next/link';
-import dynamic from 'next/dynamic';
-const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
+import RemoteButton from './remote-button';
+
+export const dynamic = 'force-dynamic';
 
 export default function Page() {
   return (
     <div className="space-  y-8">
-      <Button>Button from remote</Button>
+      <RemoteButton>Button from remote</RemoteButton>
       <h1 className="text-xl font-medium text-gray-300">Examples</h1>
 
       <div className="space-y-10 text-white">

apps/next-app-router/next-app-router-4000/app/remote-button.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import React, { Suspense } from 'react';
+
+const Button = React.lazy(() => import('remote_4001/Button'));
+
+export default function RemoteButton({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <button className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 hover:bg-gray-500 hover:text-white">
+          {children}
+        </button>
+      }
+    >
+      <Button>{children}</Button>
+    </Suspense>
+  );
+}

apps/next-app-router/next-app-router-4000/app/styling/styled-jsx/layout.tsx

@@ -1,5 +1,7 @@
 import StyledJsxRegistry from './registry';
 
+export const dynamic = 'force-dynamic';
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   return <StyledJsxRegistry>{children}</StyledJsxRegistry>;
 }

apps/next-app-router/next-app-router-4000/app/styling/styled-jsx/page.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+export const dynamic = 'force-dynamic';
+
 const SkeletonCard = () => (
   <>
     <div className="skeleton">

apps/next-app-router/next-app-router-4000/cypress/e2e/app.cy.ts

@@ -1,39 +1,28 @@
-import { getH1 } from '../support/app.po';
-
-describe('next-app-router-4000', () => {
+describe('next-app-router-4000 federation host', () => {
   beforeEach(() => cy.visit('/'));
 
-  describe('Home page', () => {
-    it('should display examples heading', () => {
-      getH1().contains('Examples');
-    });
-
-    it('should have remote button from module federation', () => {
-      cy.get('button').contains('Button from remote').should('exist');
-    });
-
-    it('should have navigation links', () => {
-      cy.get('a[href="/layouts"]').should('exist');
-      cy.get('a[href="/error-handling"]').should('exist');
-      cy.get('a[href="/loading"]').should('exist');
-    });
+  it('renders app shell and remote button on the home route', () => {
+    cy.contains('h1', 'Examples').should('be.visible');
+    cy.contains('button', 'Button from remote').should('be.visible');
+    cy.get('a[href="/layouts"]').should('exist');
+    cy.get('a[href="/parallel-routes"]').should('exist');
   });
 
-  describe('Navigation', () => {
-    it('should navigate to layouts page', () => {
-      cy.get('a[href="/layouts"]').first().click();
-      cy.url().should('include', '/layouts');
-    });
-
-    it('should navigate to parallel routes', () => {
-      cy.get('a[href="/parallel-routes"]').first().click();
-      cy.url().should('include', '/parallel-routes');
-    });
+  it('keeps federated remote components working after app-router navigation', () => {
+    cy.contains('a', 'Client Context').click();
+    cy.url().should('include', '/context');
+    cy.contains('button', 'testing').should('be.visible');
+    cy.contains('button', '0 Clicks').click();
+    cy.contains('button', '1 Clicks').should('be.visible');
   });
 
-  describe('Module Federation', () => {
-    it('should load remote button component', () => {
-      cy.get('button').contains('Button from remote').should('be.visible');
-    });
+  it('can fetch the 4001 remote container from the host test run', () => {
+    cy.request('http://localhost:4001/_next/static/chunks/remoteEntry.js').then(
+      ({ status, body }) => {
+        expect(status).to.eq(200);
+        expect(body).to.include('./Button');
+        expect(body).to.include('./GlobalNav');
+      },
+    );
   });
 });