### Develop Example Docs Locally

Source: https://github.com/shuding/nextra/blob/main/README.md

Starts the 'example-docs' project locally for development. Changes will be re-rendered instantly. For core or theme package updates, a rebuild might be necessary, or use watch mode.

```bash
pnpm --filter example-docs dev
```

--------------------------------

### Install typesense-nextra-adapter

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/search/typesense/page.mdx

Install the adapter package using npm or yarn.

```sh
npm i typesense-nextra-adapter
```

--------------------------------

### Install Nextra blog theme

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/blog/index.mdx

Install the specific theme package for the blog layout.

```sh
npm i nextra-theme-blog
```

--------------------------------

### Install Next.js, Nextra, and React

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/index.mdx

Use this command to install the core Next.js, Nextra, and React packages. This is the first step in setting up your project.

```sh
npm i react react-dom next nextra
```

--------------------------------

### Install Nextra Blog Theme Dependencies

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/blog-theme/start/page.mdx

Install Next.js, React, Nextra, and the Nextra Blog Theme. If Next.js is already installed, only install 'nextra' and 'nextra-theme-blog'.

```sh
npm i next react react-dom nextra nextra-theme-blog
```

--------------------------------

### Install KaTeX Package

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/latex/page.mdx

Install the `katex` package using npm or yarn if you plan to import its CSS directly.

```bash
npm i katex
```

--------------------------------

### Install Nextra dependencies

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/blog/index.mdx

Install the required packages for Next.js, Nextra, and React.

```sh
npm i next nextra react react-dom
```

--------------------------------

### Create Posts Page with Nextra

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/blog-theme/posts/page.mdx

This example shows the basic structure for a posts page in a Nextra application. It utilizes a custom `ExampleCode` component to render blog examples.

```jsx
import { ExampleCode } from 'components/example-code'

<ExampleCode
  example="blog"
  filePath="app/posts/page.jsx"
  metadata="/getPosts/ /getTags/"
/>
```

--------------------------------

### Install Nextra Docs Theme

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/index.mdx

Install the specific theme package for documentation websites using Nextra.

```sh
npm i nextra-theme-docs
```

--------------------------------

### Import Icons and OverviewPage Component

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/page.mdx

Imports necessary icons and the OverviewPage component from local components and nextra. This setup is required for rendering the guide's overview page.

```javascript
import {
  BrushIcon,
  GlobeIcon,
  LightningIcon,
  PictureIcon,
  StarsIcon
} from '@components/icons'
import { InformationCircleIcon, LinkIcon, MarkdownIcon } from 'nextra/icons'
import { OverviewPage } from '../../_components/overview-page'
```

--------------------------------

### Setup application entry point

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/blog/index.mdx

Import the theme stylesheet and configure the custom App component in pages/_app.js.

```jsx
import 'nextra-theme-blog/style.css'

export default function Nextra({ Component, pageProps }) {
  const getLayout = Component.getLayout || (page => page)
  return <Component {...pageProps} />
}
```

--------------------------------

### Start the development server

Source: https://github.com/shuding/nextra/blob/main/docs/components/ready-to-go.mdx

Executes the development script defined in the project's package.json file.

```sh
npm run dev
```

```sh
yarn dev
```

```sh
pnpm dev
```

```sh
bun dev
```

--------------------------------

### Install ESLint Plugin

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/foo.md

Installs the @graphql-eslint/eslint-plugin package using npm or yarn.

```sh
npm i @graphql-eslint/eslint-plugin
```

--------------------------------

### Install Nextra dependencies

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/docs-theme/start/page.mdx

Run this command in your project directory to install the required packages for a new Nextra Docs site.

```sh
npm i next react react-dom nextra nextra-theme-docs
```

```yarn
yarn add next react react-dom nextra nextra-theme-docs
```

```pnpm
pnpm add next react react-dom nextra nextra-theme-docs
```

```bun
bun add next react react-dom nextra nextra-theme-docs
```

--------------------------------

### MathJax Example Component

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/latex/page.mdx

An example of how to programmatically compile and render MathJax content using MDXRemote.

```jsx
export async function MathJaxExample() {
  const rawMdx = `~~~math
\\int_2^3x^3\\,\\mathrm{d}x
~~~`
  const rawJs = await compileMdx(rawMdx, {
    latex: {
      renderer: 'mathjax',
      options: {
        config: {
          tex: {
            macros: {
              RR: '\\mathbb{R}'
            }
          }
        }
      }
    }
  })
  return (
    <MDXRemote
      compiledSource={rawJs}
      components={{ MathJax, MathJaxContext }}
    />
  )
}
```

--------------------------------

### Install Inkeep Component Library

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/search/ai/page.mdx

Install the required React component library for Inkeep.

```bash
npm i @inkeep/cxkit-react
```

--------------------------------

### Install Pagefind dependency

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/search/page.mdx

Add Pagefind as a development dependency to your project.

```sh
npm i -D pagefind
```

--------------------------------

### Global SWRConfig Setup

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/advanced/react-native.mdx

Wrap the application with SWRConfig to apply global configurations.

```jsx
<SWRConfig
  value={{
    // ...
  }}
>
  <App>
</SWRConfig>
```

--------------------------------

### Run development and production servers

Source: https://github.com/shuding/nextra/blob/main/docs/components/install-nextra-theme.mdx

Commands to start the application in development or production modes.

```sh
npm run dev
```

```sh
npm run build
npm run start
```

--------------------------------

### Install Dependencies with npm/yarn

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

Installs the swr package and a special __esModule variable. Use npm2yarn to convert between npm and yarn commands.

```sh
npm i swr __esModule
```

--------------------------------

### React Bleed Component Examples

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/bleed.mdx

Shows how to use the Bleed component in a React application, including examples with images and iframes. Requires importing the component.

```jsx
import { Bleed } from 'nextra/components'

<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>

<Bleed full>
  ![Nextra](https://nextra.site/og.jpeg)
</Bleed>

<Bleed full>
  <iframe
    src="https://codesandbox.io/embed/swr-states-4une7"
    width="100%"
    height="500px"
    title="SWR-States"
  />
</Bleed>
```

--------------------------------

### Syntax Highlighting

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/features/mdx.mdx

Examples of standard and line-highlighted code blocks in MDX.

```mdx
```js
console.log('hello, world')
```
```

```mdx
```jsx {4,6-8}
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```

```jsx
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```

--------------------------------

### FileTree Component Example

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/src-directory/page.mdx

Demonstrates the structure of a Nextra project with and without the `src` directory using the `FileTree` component.

```jsx
import { FileTree } from 'nextra/components'

export const nextConfigPackageJson = (
  <>
    <FileTree.File name="next.config.js" />
    <FileTree.File name="package.json" />
  </>
)

export const folders = (
  <>
    <FileTree.Folder name="app" open>
      <FileTree.Folder name="[[...mdxPath]]" open>
        <FileTree.File name="page.jsx" />
      </FileTree.Folder>
      <FileTree.File name="layout.jsx" />
    </FileTree.Folder>
    <FileTree.Folder name="content" open active>
      <FileTree.File name="index.mdx" active />
    </FileTree.Folder>
    <FileTree.File name="mdx-components.js" active />
  </>
)

<FileTree>
  **Without `src` directory**
  <FileTree.Folder name="your-project" open>
    {folders}
    {nextConfigPackageJson}
  </FileTree.Folder>
</FileTree>

<FileTree>
  **With `src` directory**
  <FileTree.Folder name="your-project" open>
    <FileTree.Folder name="src" open active>
      {folders}
    </FileTree.Folder>
    {nextConfigPackageJson}
  </FileTree.Folder>
</FileTree>
```

--------------------------------

### MDX Page Example (`[[...mdxPath]]/page.jsx`)

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/content-directory/page.mdx

This is the gateway file for the `content` directory, handling dynamic routing for MDX files. It compiles and renders MDX content.

```jsx
import fs from 'node:fs/promises'
import { compileMdx } from 'nextra/compile'
import { FileTree, Steps } from 'nextra/components'
import { MDXRemote } from 'nextra/mdx-remote'

export async function MDXPathPage() {
  const filename = '[[...mdxPath]]/page.jsx'
  const rawMdx = `~~~jsx filename="${filename}" showLineNumbers
${(await fs.readFile(`../examples/docs/src/app/docs/${filename}`, 'utf8')).trimEnd()}
~~~`
  const rawJs = await compileMdx(rawMdx, { defaultShowCopyCode: true })
  return <MDXRemote compiledSource={rawJs} />
}
```

--------------------------------

### Index Based Paginated API Implementation

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/pagination.mdx

Example of using useSWRInfinite with an index-based API.

```jsx
const getKey = (pageIndex, previousPageData) => {
  if (previousPageData && !previousPageData.length) return null // reached the end
  return `/users?page=${pageIndex}&limit=10` // SWR key
}

function App() {
  const { data, size, setSize } = useSWRInfinite(getKey, fetcher)
  if (!data) return 'loading'

  // We can now calculate the number of all users
  let totalUsers = 0
  for (let i = 0; i < data.length; i++) {
    totalUsers += data[i].length
  }

  return (
    <div>
      <p>{totalUsers} users listed</p>
      {data.map(users => {
        // `data` is an array of each page's API response.
        return users.map(user => <div key={user.id}>{user.name}</div>)
      })}
      <button onClick={() => setSize(size + 1)}>Load More</button>
    </div>
  )
}
```

--------------------------------

### Configure Layout Component Props

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/docs-theme/built-ins/layout/page.mdx

Example of how to configure the Layout component with sidebar and docs repository props.

```jsx
import { Layout } from 'nextra-theme-docs'

export default function MyLayout({ children, ...props }) {
  return (
    <html lang="en">
      <body>
        <Layout
          sidebar={{ autoCollapse: true }}
          docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs">
          {children}
        </Layout>
      </body>
    </html>
  )
}
```

--------------------------------

### CSS Example

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

Basic CSS styling for an HTML element.

```css
html {
  background: red;
}
```

--------------------------------

### Install TypeScript Dependencies

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/typescript/page.mdx

Install TypeScript and necessary type packages as dev dependencies using npm or yarn.

```sh
npm i -D typescript @types/react @types/node
```

--------------------------------

### File Tree Structure Example 1

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

Represents a nested file structure with two main service folders, each containing a schema.graphql file.

```jsx
<FileTree>
  <FileTree.Folder name="users-service" defaultOpen>
    <FileTree.File name="schema.graphql" />
  </FileTree.Folder>
  <FileTree.Folder name="posts-service" defaultOpen>
    <FileTree.File name="schema.graphql" />
  </FileTree.Folder>
</FileTree>
```

--------------------------------

### Data Fetching with Unfetch

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/data-fetching.mdx

Example of using the unfetch library for data fetching with SWR. Ensure unfetch is imported if not using Next.js.

```javascript
import fetch from 'unfetch'

const fetcher = url => fetch(url).then(r => r.json())

function App() {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}
```

--------------------------------

### Tabs Component Example

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/tabs.mdx

Demonstrates the usage of the Tabs component with different programming languages. Use this to create multi-language code examples within your documentation.

```jsx
import { Tabs } from 'nextra/components'

<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
  <Tabs.Tab>
    ```js filename="hi.js"
    import { useState, useEffect } from 'react';
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```cpp filename="hi.cpp"
    #include <iostream>
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```c filename="hi.c"
    #include <stdio.h>
    ```
  </Tabs.Tab>
  <Tabs.Tab>
     ```python filename="hello.py"
    print('Hello, world!')
    ```
  </Tabs.Tab>
</Tabs>
```

--------------------------------

### Configure `contentDirBasePath` in `next.config.mjs`

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/content-directory/page.mdx

Optionally set a base path for serving content if it's not at the root. This example shows how to set it to '/docs'.

```js
import nextra from 'nextra'

const withNextra = nextra({
  contentDirBasePath: '/docs' // Or even nested e.g. `/docs/advanced`
})
```

--------------------------------

### Implement Request Logger Middleware

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/middleware.mdx

A practical example of middleware that wraps the fetcher to log requests.

```jsx
function logger(useSWRNext) {
  return (key, fetcher, config) => {
    // Add logger to the original fetcher.
    const extendedFetcher = (...args) => {
      console.log('SWR Request:', key)
      return fetcher(...args)
    }

    // Execute the hook with the new fetcher.
    return useSWRNext(key, extendedFetcher, config)
  }
}

// ... inside your component
useSWR(key, fetcher, { use: [logger] })
```

```plaintext
SWR Request: /api/user1
SWR Request: /api/user2
```

--------------------------------

### Configure next.config.js with plugins

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/turbopack/page.mdx

Example of passing non-serializable plugin functions to nextra, which is not supported when Turbopack is enabled.

```js
import nextra from 'nextra'

const withNextra = nextra({
  mdxOptions: {
    remarkPlugins: [myRemarkPlugin],
    rehypePlugins: [myRehypePlugin],
    recmaPlugins: [myRecmaPlugin]
  }
})
```

--------------------------------

### MDX Static Rendering Example with GitHub Stars

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/features/ssg.mdx

This MDX code defines an async server component to fetch GitHub stars and embeds it directly into the content. The data is fetched at build time.

```mdx
export async function Stars() {
  const response = await fetch(`https://api.github.com/repos/shuding/nextra`)
  const repo = await response.json()
  const stars = repo.stargazers_count || 0
  return <b>{stars}</b>
}

> Nextra has <Stars /> stars on GitHub!
```

--------------------------------

### Configure SWR Cache Provider

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/advanced/cache.mdx

Example of providing a Map instance as the cache storage within SWRConfig.

```jsx
import useSWR, { SWRConfig } from 'swr'

function App() {
  return (
    <SWRConfig value={{ provider: () => new Map() }}>
      <Page />
    </SWRConfig>
  )
}
```

--------------------------------

### Render OverviewPage Component

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/page.mdx

Renders the OverviewPage component, passing the filePath and a configuration object for various icons. This component is central to displaying guide content.

```javascript
<OverviewPage
  filePath={metadata.filePath}
  icons={{
    MarkdownIcon,
    StarsIcon,
    LinkIcon,
    PictureIcon,
    LightningIcon,
    GlobeIcon,
    BrushIcon,
    InformationCircleIcon
  }}
/>
```

--------------------------------

### Sorting Keys Example in _meta.js

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/meta-file/page.mdx

Demonstrates how JavaScript object key ordering can affect the final output. Numeric keys are sorted before string keys, and numeric keys are converted to strings.

```javascript
export default {
  foo: '',
  1992_10_21: '',
  1: ''
}
```

```javascript
export default {
  '1': '',
  '19921021': '',
  foo: ''
}
```

--------------------------------

### Implementing initFocus with AppState

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/advanced/react-native.mdx

Example implementation of initFocus using React Native's AppState to trigger revalidation when the app becomes active.

```jsx
import { AppState } from 'react-native'

// ...

<SWRConfig
  value={{
    provider: () => new Map(),
    isVisible: () => { return true },
    initFocus(callback) {
      let appState = AppState.currentState

      const onAppStateChange = (nextAppState) => {
        /* If it's resuming from background or inactive mode to active one */
        if (appState.match(/inactive|background/) && nextAppState === 'active') {
          callback()
        }
        appState = nextAppState
      }

      // Subscribe to the app state change events
      const subscription = AppState.addEventListener('change', onAppStateChange)

      return () => {
        subscription.remove()
      }
    }
  }}
>
  <App>
</SWRConfig>
```

--------------------------------

### File Tree Structure Example 2

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

Represents a nested file structure where the posts-service folder is nested within the users-service folder, and both contain a schema.graphql file.

```jsx
<FileTree>
  <FileTree.Folder name="users-service" defaultOpen>
    <FileTree.File name="schema.graphql" />
    <FileTree.Folder name="posts-service" defaultOpen>
      <FileTree.File name="schema.graphql" />
    </FileTree.Folder>
  </FileTree.Folder>
</FileTree>
```

--------------------------------

### Markdown Relative Link Example

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/link/page.mdx

Standard Markdown syntax for creating a relative link that Nextra will automatically process.

```markdown
Click [here](/about) to read more.
```

--------------------------------

### Compile and Render Mermaid MDX

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/mermaid/page.mdx

This example demonstrates how to compile MDX content containing a Mermaid code block and render it using the MDXRemote component with the Mermaid component. Ensure the Mermaid component is provided.

```javascript
import { compileMdx } from 'nextra/compile'
import { Mermaid } from 'nextra/components'
import { MDXRemote } from 'nextra/mdx-remote'

export async function Demo() {
  const mermaidCodeblock = `
    graph TD;
    subgraph AA [Consumers]
    A[Mobile app];
    B[Web app];
    C[Node.js client];
    end
    subgraph BB [Services]
    E[REST API];
    F[GraphQL API];
    G[SOAP API];
    end
    Z[GraphQL API];
    A --> Z;
    B --> Z;
    C --> Z;
    Z --> E;
    Z --> F;
    Z --> G;
  `
  const rawJs = await compileMdx(`${mermaidCodeblock}
## Usage
~~~
${mermaidCodeblock}
~~~`)
  return <MDXRemote compiledSource={rawJs} components={{ Mermaid }} />
}
```

--------------------------------

### Data Fetching with SWR Hook

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

This refactored example uses a custom `useUser` hook with SWR. Data fetching logic is localized to components that need it, simplifying parent components and enabling automatic request deduplication and caching.

```jsx
// page component
function Page() {
  return (
    <div>
      <Navbar />
      <Content />
    </div>
  )
}

// child components
function Navbar() {
  return (
    <div>
      ...
      <Avatar />
    </div>
  )
}

function Content() {
  const { user, isLoading } = useUser()
  if (isLoading) return <Spinner />
  return <h1>Welcome back, {user.name}</h1>
}

function Avatar() {
  const { user, isLoading } = useUser()
  if (isLoading) return <Spinner />
  return <img src={user.avatar} alt={user.name} />
}
```

--------------------------------

### Build and Index Documentation

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/search/typesense/page.mdx

Run the build command to generate your site and automatically index content into Typesense.

```sh
npm run build
```

--------------------------------

### Markdown with Inline and Display LaTeX

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/latex/page.mdx

Example of using inline LaTeX with `$...$` and display math within a `math`-labeled fenced code block in Markdown.

```md
The **Pythagorean equation** is $a=\sqrt{b^2 + c^2}$ and the quadratic formula:

```math
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
```
```

--------------------------------

### Create First MDX Page (`content/index.mdx`)

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/content-directory/page.mdx

This is the entry point for your content. It demonstrates a basic MDX file structure.

```mdx
# Welcome to Nextra

Hello, world!
```

--------------------------------

### MDX Bleed Component Examples

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/bleed.mdx

Demonstrates using the Bleed component within MDX files, including text, images, and iframes. Supports Markdown syntax inside.

```mdx
<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>

<Bleed full>![Nextra](https://nextra.site/og.jpeg)</Bleed>

<Bleed full>
  <iframe
    src="https://codesandbox.io/embed/swr-states-4une7"
    width="100%"
    height="500px"
    title="SWR-States"
  />
</Bleed>
```

--------------------------------

### Custom SWR middleware with types

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/typescript.mdx

Provides an example of defining custom middleware for SWR with TypeScript, including importing `Middleware` and `SWRHook` types. This is for advanced customization of SWR's behavior.

```typescript
import useSWR, { Middleware, SWRHook } from 'swr'

const swrMiddleware: Middleware = 
  (useSWRNext: SWRHook) => (key, fetcher, config) => {
    // ...
    return useSWRNext(key, fetcher, config)
  }
```

--------------------------------

### Build Nextra Theme Package

Source: https://github.com/shuding/nextra/blob/main/README.md

Command to build the 'nextra-theme-docs' package.

```bash
pnpm --filter nextra-theme-docs build
```

--------------------------------

### Create Dynamic Tag Pages

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/blog-theme/tags/page.mdx

Use this pattern to create dynamic pages for each tag, fetching relevant posts and tags. Ensure the `ExampleCode` component is correctly configured.

```jsx
import { ExampleCode } from 'components/example-code'

<ExampleCode
  example="blog"
  filePath="app/tags/[tag]/page.jsx"
  metadata="/getPosts/ /getTags/"
/>
```

--------------------------------

### Configure _meta with JSX and Objects

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/meta-file/page.mdx

Demonstrates using strings, JSX elements for icons, and objects for additional configuration within the _meta file.

```jsx
import { GitHubIcon } from 'nextra/icons'

export default {
  index: 'My Homepage',
  // You can use JSX elements to change the look of titles in the sidebar, e.g. insert icons
  contact: (
    <Italic className="my-class">
      <GitHubIcon height="20" />
      Contact Us
    </Italic>
  ),
  about: {
    // Alternatively, you can set title with `title` property
    title: 'About Us'
    // ... and provide extra configurations
  }
}

// Custom component for italicized text
function Italic({ children, ...props }) {
  return <i {...props}>{children}</i>
}
```

--------------------------------

### Configure postbuild script for search indexing

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/search/page.mdx

Add a postbuild script to package.json to index files after the build process completes.

```json
"scripts": {
  "postbuild": "pagefind --site .next/server/app --output-path public/_pagefind"
}
```

```json
"scripts": {
  "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind"
}
```

--------------------------------

### Math Formula Example

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/latex/page.mdx

A standard LaTeX math formula block.

```math
\int_2^3x^3\,\mathrm{d}x
```

--------------------------------

### Python Class Example

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

A Python class representing a Character with a name attribute.

```python
# type Character {
class Character:
  # name: String
  def name(self):
    return self._name
```

--------------------------------

### Importing useSWRInfinite for SWR 0.x

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/pagination.mdx

Required import syntax for older versions of SWR.

```javascript
import {useSWRInfinite} from 'swr'
```

--------------------------------

### GraphQL Schema Example

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

Defines a GraphQL type for a Character with a name field.

```graphql
type Character {
  name: String
}
```

--------------------------------

### Import Icons and Components for Blog Theme

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/blog-theme/page.mdx

Imports necessary icons and the OverviewPage component for setting up a blog theme. Ensure these components are available in your project's `@components/icons` and `nextra/icons` paths.

```javascript
import {
  ChevronRightIcon,
  FilesIcon,
  RSSIcon,
  TagsIcon
} from '@components/icons'
import { FileIcon } from 'nextra/icons'
import { OverviewPage } from '../../_components/overview-page'
```

--------------------------------

### Define theme configuration

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/get-started.mdx

Set up the theme.config.js file to customize the documentation site appearance and behavior.

```js
export default {
  project: {
    link: 'https://github.com/shuding/nextra' // GitHub link in the navbar
  },
  docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // base URL for the docs repository
  getNextSeoProps: () => ({ titleTemplate: '%s – Nextra' }),
  navigation: true,
  darkMode: true,
  footer: {
    text: `MIT ${new Date().getFullYear()} © Shu Ding.`
  },
  editLink: {
    text: 'Edit this page on GitHub'
  },
  logo: (
    <>
      <svg>...</svg>
      <span>Next.js Static Site Generator</span>
    </>
  ),
  head: (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="Nextra: the next docs builder" />
      <meta name="og:title" content="Nextra: the next docs builder" />
    </>
  ),
  primaryHue: {
    dark: 204,
    light: 212
  }
}
```

--------------------------------

### Math Expression Example 1

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

A simple mathematical expression using LaTeX syntax.

```math
x^2
```

--------------------------------

### C# Class Example

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

A C# class representing a Character with a public Name property.

```csharp
// type Character {
public class Character {
  // name: String
  public String Name { get; }
}
```

--------------------------------

### React Component Integration

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/features/mdx.mdx

Example of embedding a React component within MDX content.

```mdx
<Callout>Give [**Nextra**](https://github.com/shuding/nextra) a star!</Callout>
```

--------------------------------

### Run build command

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/static-exports/page.mdx

Execute the build process using the project's package manager.

```sh
npm run build
```

--------------------------------

### Math Expression Example 2

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/getting-started.mdx

A definite integral mathematical expression using LaTeX syntax.

```math
\int_1^2x^2
```

--------------------------------

### Equivalent SWR Fetcher Expressions

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/arguments.mdx

Demonstrates three equivalent ways to pass a key to the fetcher function.

```js
useSWR('/api/user', () => fetcher('/api/user'))
useSWR('/api/user', url => fetcher(url))
useSWR('/api/user', fetcher)
```

--------------------------------

### ESLint React Hooks Error

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/mdx-components-file/page.mdx

Example of the ESLint error encountered when using useMDXComponents incorrectly.

```bash
React Hook "useMDXComponents" cannot be called at the top level.
React Hooks must be called in a React function component or a custom React Hook function.
```

--------------------------------

### Render OverviewPage Component

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/docs-theme/page.mdx

Initializes the OverviewPage component with file path metadata and icon configuration.

```jsx
<OverviewPage
  filePath={metadata.filePath}
  icons={{
    ChevronRightIcon,
    BoxIcon
  }}
/>
```

--------------------------------

### useSWRInfinite with explicit key loader type

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/typescript.mdx

Demonstrates typing for `useSWRInfinite` using `SWRInfiniteKeyLoader`. Useful when the key generation logic is complex and requires explicit type definitions.

```typescript
import { SWRInfiniteKeyLoader } from 'swr/infinite'

const getKey: SWRInfiniteKeyLoader = (index, previousPageData) => {
  // ...
}

const { data } = useSWRInfinite(getKey, fetcher)
```

--------------------------------

### Markdown Comment Example

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/test.md

This snippet shows how to include comments within a standard Markdown file. Comments are ignored during rendering.

```markdown
<!-- this is a comment -->
```

--------------------------------

### Build Nextra Package

Source: https://github.com/shuding/nextra/blob/main/README.md

Use this command to build the core 'nextra' package. For continuous development, use the watch mode.

```bash
pnpm --filter nextra build
```

--------------------------------

### Paginación Simple con useSWR

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/es/docs/pagination.mdx

Implementa una UI de paginación básica donde la URL de la API cambia dinámicamente con el estado del índice de página. Requiere manejo manual de estados de carga y error.

```jsx
function App() {
  const [pageIndex, setPageIndex] = useState(0)

  // La URL de la API incluye el índice de la página, que es un React state.
  const { data } = useSWR(`/api/data?page=${pageIndex}`, fetcher)

  // ... manejar los estados de carga y error

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
      <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
    </div>
  )
}
```

--------------------------------

### Implement GitHub Alert Syntax

Source: https://github.com/shuding/nextra/blob/main/examples/blog/app/posts/(with-comments)/nextra-components/page.mdx

Use blockquote syntax to create GitHub-style alerts.

```markdown
> [!NOTE]
>
> Useful information that users should know, even when skimming content.
```

```markdown
> [!TIP]
>
> Helpful advice for doing things better or more easily.
```

```markdown
> [!IMPORTANT]
>
> Key information users need to know to achieve their goal.
```

```markdown
> [!WARNING]
>
> Urgent info that needs immediate user attention to avoid problems.
```

```markdown
> [!CAUTION]
>
> Advises about risks or negative outcomes of certain actions.
```

--------------------------------

### Configure table styling in next.config.mjs

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/table/page.mdx

Enable styling for standard HTML table elements by adding them to the whiteListTagsStyling configuration in your Nextra setup.

```js
import nextra from 'nextra'

const withNextra = nextra({
  whiteListTagsStyling: ['table', 'thead', 'tbody', 'tr', 'th', 'td']
})

export default withNextra()
```

--------------------------------

### Import Blog Component

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/blog.mdx

Import the Blog component from the specified path. This component is used to render blog content.

```javascript
import { Blog } from '@app/_components/blog'
```

--------------------------------

### Conditionally Fetch Data with Null Key

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/conditional-fetching.md

Use `null` as the key to prevent SWR from starting a request. This is useful when a condition is not met.

```javascript
const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher)
```

--------------------------------

### Configure Typesense Indexing Script

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/search/typesense/page.mdx

Create a script to index your documentation into Typesense after the build. Ensure you provide your Typesense server URL and an Admin API key with write permissions.

```typescript
import { indexNextraToTypesense } from 'typesense-nextra-adapter'

indexNextraToTypesense({
  serverConfig: {
    nodes: [{ url: 'YOUR_TYPESENSE_SERVER_URL' }],
    apiKey: 'YOUR_TYPESENSE_ADMIN_API_KEY' // Requires Write permissions
  },
  collectionName: 'nextra-docs'
})
```

--------------------------------

### Callout Component with Custom Emoji

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/callout.mdx

Shows how to customize the Callout component by adding a specific emoji. This example uses the French flag emoji.

```jsx
<Callout type="info" emoji="🇫🇷">
  `<Callout type="info" emoji="🇫🇷">…`
</Callout>
```

--------------------------------

### Render tables

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/markdown/page.mdx

Create tables using pipes and hyphens to define columns and alignment.

```md
| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |
```

--------------------------------

### Example Npm2Yarn Code Block

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/npm2yarn/page.mdx

A sample code block with 'npm2yarn' metadata, intended to be processed by the remark-npm2yarn plugin. This block will be transformed into interactive tabs.

```markdown
```sh npm2yarn
npm i -D @graphql-eslint/eslint-plugin
```
```

--------------------------------

### Passing Objects as Keys

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/arguments.mdx

Demonstrates passing objects as keys and using conditional fetching based on previous data.

```js
const { data: user } = useSWR(['/api/user', token], fetchWithToken)

// ...and then pass it as an argument to another useSWR hook
const { data: orders } = useSWR(
  user ? ['/api/orders', user] : null,
  fetchWithUser
)
```

```js
const { data: orders } = useSWR({ url: '/api/orders', args: user }, fetcher)
```

--------------------------------

### Paginación Optimizada con Precarga

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/es/docs/pagination.mdx

Mejora la UX de paginación precargando los datos de la siguiente página en un div oculto. SWR detecta la obtención de datos y los datos estarán disponibles instantáneamente al navegar.

```jsx
function App() {
  const [pageIndex, setPageIndex] = useState(0)

  return (
    <div>
      <Page index={pageIndex} />
      <div style={{ display: 'none' }}>
        <Page index={pageIndex + 1} />
      </div>
      <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
      <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
    </div>
  )
}
```

--------------------------------

### Programmatic Data Prefetching with SWR mutate

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/prefetching.md

Prefetch data programmatically, for example, when a user hovers over a link. This function refetches data and updates the SWR cache.

```javascript
import { mutate } from 'swr'

function prefetch() {
  mutate(
    '/api/data',
    fetch('/api/data').then(res => res.json())
  )
  // the second parameter is a Promise
  // SWR will use the result when it resolves
}
```

--------------------------------

### Callout as a React Component

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/callout.mdx

Integrate the Callout component within a React application. Ensure 'nextra/components' is imported correctly. This example shows how to use it within a JSX component.

```jsx
import { Callout } from 'nextra/components'

const Component = () => {
  return (
    <Callout emoji="👾">
      **Space Invaders** is a 1978 shoot 'em up arcade game developed by
      Tomohiro Nishikado.
    </Callout>
  )
}
```

--------------------------------

### Configure next.config.mjs for static export

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/static-exports/page.mdx

Set the output to 'export' and disable image optimization to enable static site generation.

```js
import nextra from 'nextra'

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true // mandatory, otherwise won't export
  }
  // Optional: Change the output directory `out` -> `dist`
  // distDir: "build"
}
const withNextra = nextra({
  // ... other Nextra config options
})

export default withNextra(nextConfig)
```

--------------------------------

### Render Blog Overview Page

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/blog-theme/page.mdx

Renders the OverviewPage component, passing metadata and a map of icons. This is typically used to set up the main blog index page.

```javascript
<OverviewPage
  filePath={metadata.filePath}
  icons={{
    ChevronRightIcon,
    FilesIcon,
    FileIcon,
    TagsIcon,
    RSSIcon
  }}
/>
```

--------------------------------

### Import SWR modules

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/blog/swr-v1.mdx

Utilize path imports to include only the necessary parts of the library, improving tree-shaking.

```js
import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'
```

--------------------------------

### Implement RSS feed route

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/blog-theme/rss/page.mdx

Use the ExampleCode component to define the RSS route configuration.

```jsx
<ExampleCode
  example="blog"
  filePath="app/rss.xml/route.js"
  metadata="/getPosts/"
/>
```

--------------------------------

### Basic Theme Configuration

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/configuration.mdx

The standard structure for the theme.config.js file in the root directory.

```js
export default {
  projectLink: 'https://gitlab.com/librewolf-community/browser',
  titleSuffix: ' – Nextra',
  footerText: `MIT ${new Date().getFullYear()} © Nextra.`
}
```

--------------------------------

### Inline code highlighting

Source: https://github.com/shuding/nextra/blob/main/examples/blog/app/posts/(with-comments)/code-blocks/page.mdx

Demonstrates how to apply syntax highlighting to inline code snippets.

```js
import React from 'react'
```

--------------------------------

### Access and Clear SWR Cache

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/advanced/cache.mdx

Demonstrates how to access the SWR cache instance using `useSWRConfig` to get or clear cache entries. Avoid direct writes to the cache as it may lead to undefined behavior.

```jsx
const { cache } = useSWRConfig()

cache.get(key) // Get the current data for a key.
cache.clear() // ⚠️ Clear all the cache. SWR will revalidate upon re-render.
```

--------------------------------

### Render tables with GFM syntax

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/advanced/table/page.mdx

Use standard GitHub Flavored Markdown syntax for creating tables in MDX files.

```mdx
| left   | center | right |
| :----- | :----: | ----: |
| foo    |  bar   |   baz |
| banana | apple  |  kiwi |
```

--------------------------------

### Update package.json postbuild script

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/guide/static-exports/page.mdx

Configure the Pagefind search engine to target the correct output directory after the build process.

```json
"scripts": {
  "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind"
}
```

--------------------------------

### Reset SWR Cache Between Test Cases with Jest

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/advanced/cache.mdx

This example demonstrates how to reset the SWR cache for each test case using Jest. By providing an empty Map as the cache provider, you ensure a clean state for every test.

```jsx
describe('test suite', async () => {
  it('test case', async () => {
    render(
      <SWRConfig value={{ provider: () => new Map() }}>
        <App />
      </SWRConfig>
    )
  })
})
```

--------------------------------

### Configure Nextra Blog Theme

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/blog-theme/start/page.mdx

Create a theme configuration file for the Nextra Blog theme. This file customizes elements like the footer, head tags, read more button, and navigation.

```jsx
export default {
  footer: <p>MIT 2023 © Nextra.</p>,
  head: ({ title, meta }) => (
    <>
      {meta.description && (
        <meta name="description" content={meta.description} />
      )}
      {meta.tag && <meta name="keywords" content={meta.tag} />}
      {meta.author && <meta name="author" content={meta.author} />}
    </>
  ),
  readMore: 'Read More →',
  postFooter: null,
  darkMode: false,
  navs: [
    {
      url: 'https://github.com/shuding/nextra',
      name: 'Nextra'
    }
  ]
}
```

--------------------------------

### Use SWR Hook with Options

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/options.mdx

Demonstrates the basic usage of the useSWR hook, destructuring its return values. This is the primary way to interact with SWR for data fetching and management.

```javascript
const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)
```

--------------------------------

### Render FileTree structures

Source: https://github.com/shuding/nextra/blob/main/examples/blog/app/posts/(with-comments)/nextra-components/page.mdx

Use FileTree to visualize directory and file structures.

```jsx
<FileTree>
  <FileTree.Folder name="pages" defaultOpen>
    <FileTree.Folder name="fruits" defaultOpen>
      <FileTree.File name="_meta.js" />
      <FileTree.File name="apple.mdx" />
      <FileTree.File name="banana.mdx" />
    </FileTree.Folder>
    <FileTree.File name="_meta.js" />
    <FileTree.File name="about.mdx" />
    <FileTree.File name="contact.mdx" />
    <FileTree.File name="index.mdx" />
  </FileTree.Folder>
</FileTree>
```

```jsx
<FileTree>
  <FileTree.Folder name="users-service" defaultOpen>
    <FileTree.File name="schema.graphql" />
  </FileTree.Folder>
  <FileTree.Folder name="posts-service" defaultOpen>
    <FileTree.File name="schema.graphql" />
  </FileTree.Folder>
</FileTree>
```

--------------------------------

### Define theme configuration

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/blog/index.mdx

Customize the blog theme appearance and metadata settings in theme.config.js.

```jsx
export default {
  footer: <p>MIT 2021 © Nextra.</p>,
  head: ({ title, meta }) => (
    <>
      {meta.description && (
        <meta name="description" content={meta.description} />
      )}
      {meta.tag && <meta name="keywords" content={meta.tag} />}
      {meta.author && <meta name="author" content={meta.author} />}
    </>
  ),
  readMore: 'Read More →',
  titleSuffix: null,
  postFooter: null,
  cusdis: {
    appId: 'your_app_id',
    host: 'your_host(optional)',
    lang: 'your_lang'
  },
  darkMode: false,
  navs: [
    {
      url: 'https://github.com/shuding/nextra',
      name: 'Nextra'
    }
  ]
}
```

--------------------------------

### Configure package.json scripts

Source: https://github.com/shuding/nextra/blob/main/docs/components/install-nextra-theme.mdx

Define the standard Next.js development and production scripts.

```json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
```

--------------------------------

### Implement Tabs

Source: https://github.com/shuding/nextra/blob/main/examples/blog/app/posts/(with-comments)/nextra-components/page.mdx

Use Tabs to switch between different content views.

```jsx
<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
  <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
  <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
</Tabs>
```

--------------------------------

### Nextra Theme Configuration

Source: https://github.com/shuding/nextra/blob/main/examples/docs/src/content/themes/docs/index.mdx

Set up the theme configuration for Nextra, including project links, repository base, search settings, and footer details.

```javascript
export default {
  projectLink: 'https://github.com/shuding/nextra', // GitHub link in the navbar
  docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // base URL for the docs repository
  titleSuffix: ' – Nextra',
  nextLinks: true,
  prevLinks: true,
  search: true,
  customSearch: null, // customizable, you can use algolia for example
  darkMode: true,
  footer: true,
  footerText: `MIT ${new Date().getFullYear()} © Shu Ding.`, 
  footerEditLink: `Edit this page on GitHub`,
  logo: (
    <>
      <svg>...</svg>
      <span>Next.js Static Site Generator</span>
    </>
  ),
  head: (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="Nextra: the next docs builder" />
      <meta name="og:title" content="Nextra: the next docs builder" />
    </>
  )
}
```

--------------------------------

### Define Fallback Configuration in _meta.js

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/file-conventions/meta-file/page.mdx

Use the '*' key in _meta.js to set a default configuration for all pages in a folder. This simplifies defining common properties like 'type'.

```javascript
export default {
  '*': {
    type: 'page'
  },
  index: 'Home',
  frameworks: 'Frameworks',
  fruits: 'Fruits',
  about: 'About'
}
```

--------------------------------

### Configure next.config.mjs

Source: https://github.com/shuding/nextra/blob/main/docs/components/install-nextra-theme.mdx

Initialize Nextra within the Next.js configuration file.

```js
import nextra from 'nextra'

// Set up Nextra with its configuration
const withNextra = nextra({
  // ... Add Nextra-specific options here
})

// Export the final Next.js config with Nextra included
export default withNextra({
  // ... Add regular Next.js options here
})
```

--------------------------------

### SWR configuration with explicit types

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/typescript.mdx

Shows how to provide typed SWR configuration options, such as `fallbackData` and `revalidateOnMount`. Requires importing `SWRConfiguration` type.

```typescript
import { useSWR } from 'swr'
import type { SWRConfiguration } from 'swr'

const config: SWRConfiguration = {
  fallbackData: 'fallback',
  revalidateOnMount: false
  // ...
}

const { data } = useSWR<string[]>('/api/data', fetcher, config)
```

--------------------------------

### Import Complete Page

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/advanced/markdown-import.mdx

Import an entire markdown page as a component. This is useful for embedding content from other pages. Pass any necessary props like `params`.

```mdx
import IndexPage from '../../index.mdx'

<IndexPage params={props.params} />
```

--------------------------------

### Configure Navigation Links

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/docs-theme/built-ins/layout/page.mdx

Enable previous and next page links at the bottom of the content by setting the navigation prop.

```jsx
<Layout
  navigation={{
    prev: true,
    next: true
  }}>
  {children}
</Layout>
```

--------------------------------

### Data Fetching with Axios

Source: https://github.com/shuding/nextra/blob/main/examples/swr-site/content/en/docs/data-fetching.mdx

Demonstrates using the axios library for data fetching with SWR. The fetcher function extracts the response data.

```javascript
import axios from 'axios'

const fetcher = url => axios.get(url).then(res => res.data)

function App() {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}
```

--------------------------------

### Import Nextra Docs Theme Components

Source: https://github.com/shuding/nextra/blob/main/docs/app/docs/docs-theme/page.mdx

Imports necessary icons and the overview page component for the documentation layout.

```javascript
import { BoxIcon, ChevronRightIcon } from '@components/icons'
import { OverviewPage } from '../../_components/overview-page'
```