#路由和导入页面
在 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;
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 * as OtherPage from 'remote/pages/other';
const Page = OtherPage.default;
export const getServerSideProps = OtherPage.getServerSideProps
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 }
}