import {Tabs, Tab} from '@theme'
# Routing & Importing Pages
Importing federated pages in Next.js required working within the constraints of how next builds.
## Importing Remote Pages
Next depends on static analysis to determine how to build or render a page.
Because Module Federation is at runtime, next is unable to see what exports a remote page contains at build time.
This requires you to re-export the page remotes page api / data lifecycle inside the host.
#### Sample Remote App
```jsx
import React from 'react';
import Head from 'next/head';
const Shop = (props) => {
return (
Shop
{JSON.stringify(props)}
);
};
Shop.getInitialProps = async () => {
const fallback = {
name: 'Luke Skywalker',
height: '172',
mass: '77',
hair_color: 'blond'
};
return Promise.resolve(fallback);
};
export default Shop;
```
```jsx
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 (
{repo.stargazers_count}
)
}
```
```jsx
import App from 'next/app'
export default function MyApp({
Component,
pageProps,
example,
}) {
return (
<>
)
}
MyApp.getInitialProps = async (context) => {
const ctx = await App.getInitialProps(context)
return { ...ctx }
}
```
#### Sample Host App
```jsx
import Shop from 'remote/pages/index';
const Page = Shop;
Page.getInitialProps = Shop.getInitialProps;
export default Page;
```
```jsx
import * as OtherPage from 'remote/pages/other';
const Page = OtherPage.default;
export const getServerSideProps = OtherPage.getServerSideProps
export default Page;
```
```jsx
import App from 'next/app'
export default function MyApp({
Component,
pageProps,
example,
}) {
return (
<>
)
}
MyApp.getInitialProps = async (context) => {
const ctx = await App.getInitialProps(context)
return { ...ctx }
}
```