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