路由和导入页面
在 Next.js 中导入联合页面需要在 next 构建的工作方式的约束内操作。
导入远程页面
Next 依赖于静态分析来确定如何构建或渲染页面。
由于模块联邦是在运行时的，因此 next 在构建时无法看到远程页面包含哪些导出。
这要求你在宿主内重新导出页面远程的页面 API / 数据生命周期。
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;
