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
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;
Sample Host App
import Shop from 'remote/pages/index';
const Page = Shop;
Page.getInitialProps = Shop.getInitialProps;
export default Page;
