Skip to Content
🚧 This is WIP documentation for Nextra 4.0. Dima Machina is looking for a new job or consulting.
DocumentationAdvancedRemote Content

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