`importPage` Function

Function to import an MDX/Markdown page from the content directory.

This function is essential for Nextra’s dynamic page loading from a catch-all route.

Exported from nextra/pages.

Signature

Parameters:

Name	Type	Default
`pathSegments`	`string[]` Array of path segments representing the route to the page. E.g., for the route `/docs/getting-started/installation`, pass `['docs', 'getting-started', 'installation']`.	`[]`
`lang`	`string` The language segment when using i18n.	`''`

Returns:

Promise<EvaluateResult>

A Promise that resolves to an object containing:

default: The MDX component to render
toc: Table of contents list
metadata: Page’s front matter or metadata object including title, description, etc.

See

Example

Basic usage in a dynamic Next.js route


const { default: MDXContent, toc, metadata } = await importPage(['docs', 'getting-started'])

Usage with i18n


const { default: MDXContent } = await importPage(['docs', 'getting-started'], 'en')

Import page’s front matter in `generateMetadata` function


// app/[[...mdxPath]]/page.tsx
import { importPage } from 'nextra/pages'
 
export async function generateMetadata(props) {
  const params = await props.params
  const { metadata } = await importPage(params.mdxPath)
  return metadata
}

Import page in a catch-all route


// app/[[...mdxPath]]/page.tsx
import { generateStaticParamsFor, importPage } from 'nextra/pages'
import { useMDXComponents as getMDXComponents } from 'path/to/your/mdx-components'
 
export const generateStaticParams = generateStaticParamsFor('mdxPath')
 
const Wrapper = getMDXComponents().wrapper
 
export default async function Page(props) {
  const params = await props.params
  const result = await importPage(params.mdxPath)
  const { default: MDXContent, toc, metadata } = result
  return (
    <Wrapper toc={toc} metadata={metadata}>
      <MDXContent {...props} params={params} />
    </Wrapper>
  )
}

importPage Function