指南
实践
配置
插件
案例
博客
指南
实践
配置
插件
案例
博客
简体中文

路由和导入页面

在 Next.js 中导入联合页面需要在 next 构建的工作方式的约束内操作。

导入远程页面

Next 依赖于静态分析来确定如何构建或渲染页面。

由于模块联邦是在运行时的，因此 next 在构建时无法看到远程页面包含哪些导出。

这要求你在宿主内重新导出页面远程的页面 API / 数据生命周期。

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;

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;