Remote Content
Note
You can check out the SWR i18n example source code.
Create [[...slug]]/page.tsx file
Create [[...slug]]/page.tsx file in app/ directory with the following
content:
app/graphql-eslint/[[...slug]]/page.tsx
import { notFound } from 'next/navigation'
import { compileMdx } from 'nextra/compile'
import { Callout, Tabs } from 'nextra/components'
import { evaluate } from 'nextra/evaluate'
import {
  convertToPageMap,
  mergeMetaWithPageMap,
  normalizePageMap
} from 'nextra/page-map'
import { useMDXComponents } from '../../../../../mdx-components'
 
const user = 'graphql-hive'
const repo = 'graphql-eslint'
const branch = '34b722a2a520599ce06a4ddcccc9623b76434089'
const docsPath = 'website/src/pages/docs/'
const filePaths = [
  'configs.mdx',
  'custom-rules.mdx',
  'getting-started.mdx',
  'getting-started/parser-options.mdx',
  'getting-started/parser.mdx',
  'index.mdx'
]
 
const { mdxPages, pageMap: _pageMap } = convertToPageMap({
  filePaths,
  basePath: 'graphql-eslint'
})
 
export const [eslintPage] = _pageMap[0].children
 
const eslintPageMap = mergeMetaWithPageMap(eslintPage, {
  index: 'Introduction',
  'getting-started': {
    title: 'Getting Started',
    items: {
      index: 'Overview',
      'parser-options': '',
      parser: ''
    }
  },
  configs: '',
  'custom-rules': ''
})
 
export const pageMap = normalizePageMap(eslintPageMap)
 
const { wrapper: Wrapper, ...components } = useMDXComponents({
  $Tabs: Tabs,
  Callout
})
 
type PageProps = Readonly<{
  params: Promise<{
    slug: string[]
  }>
}>
 
export default async function Page(props: PageProps) {
  const params = await props.params
  const route = params.slug.join('/')
  const filePath = mdxPages[route]
 
  if (!filePath) {
    notFound()
  }
  const response = await fetch(
    `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${docsPath}${filePath}`
  )
  const data = await response.text()
  const rawJs = await compileMdx(data, { filePath })
  const { default: MDXContent, toc, metadata } = evaluate(rawJs, components)
 
  return (
    <Wrapper toc={toc} metadata={metadata}>
      <MDXContent />
    </Wrapper>
  )
}
 
export function generateStaticParams() {
  const params = Object.keys(mdxPages).map(route => ({
    slug: route.split('/')
  }))
 
  return params
}Enhance pageMap
You need to modify pageMap list in layout file, to properly display sidebar
and mobile navigation.
app/layout.tsx
import { getPageMap } from 'nextra/page-map'
import { pageMap as graphqlEslintPageMap } from './graphql-eslint/[[...slug]]/page'
 
// ...
 
const pageMap = [...(await getPageMap()), graphqlEslintPageMap]Last updated on