Routing & Importing Pages

Importing federated pages em Next.js obrigatório working within o constraints de como next builds.

Importing Remote Pages

Next depends on static analysis para determine como para build ou render uma page.

Porque Module Federation é em runtime, next é unable para see o que exporta uma remote page contains at build time.

Este requires você para re-exporte o page remotes page api / dados lifecycle inside o host.

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 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 }
}

#Routing & Importing Pages

#Importing Remote Pages

#Sample Remote App

#Sample Host App

Routing & Importing Pages

Importing Remote Pages

Sample Remote App

Sample Host App