Routing & Importing Pages

Importing federated pages in Next.js required working within the constraints of how next builds.

Importing Remote Pages

Next depends on static analysis to determine how to build or render a page.

Because Module Federation is at runtime, next is unable to see what exports a remote page contains at build time.

This requires you to re-export the page remotes page api / data lifecycle inside the host.

Sample Remote App

remote/pages/index.js

remote/pages/other.js

remote/pages/_app.js

import React from 'react';
import Head from 'next/head';

const Shop = (props) => {
  return (
    <div>
      <Head>
        <title>Shop</title>
      </Head>
      <pre>{JSON.stringify(props)}</pre>
    </div>
  );
};
Shop.getInitialProps = async () => {
  const fallback = {
    name: 'Luke Skywalker',
    height: '172',
    mass: '77',
    hair_color: 'blond'
  };
  return Promise.resolve(fallback);
};

export default Shop;

export const getServerSideProps = async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

import App  from 'next/app'

export default function MyApp({
  Component,
  pageProps,
  example,
}) {
  return (
    <>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx }
}

Sample Host App

host/pages/index.js

host/pages/other.js

host/pages/_app.js

import Shop from 'remote/pages/index';
const Page = Shop;
Page.getInitialProps = Shop.getInitialProps;
export default Page;

import App  from 'next/app'

export default function MyApp({
  Component,
  pageProps,
  example,
}) {
  return (
    <>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx }
}

#Routing & Importing Pages

#Importing Remote Pages

#Sample Remote App

#Sample Host App

Routing & Importing Pages

Importing Remote Pages

Sample Remote App

Sample Host App