路由和导入页面
在 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;
