--- description: Nextra is a framework built on top of Next.js that enables the creation of content-focused websites. It combines the robust features of Next.js with enhanced capabilities for crafting Markdown-based content. --- import { Cards, Image } from 'nextra/components' import { cloneElement } from 'react' export default function MdxLayout(props) { return cloneElement(props.children, { components: { img: Image } }) } # Introduction **Nextra** is a framework on top of Next.js, that lets you build content focused websites. It has all the great features from Next.js, plus extra power to create Markdown-based content with ease. ## Quick start To start using Nextra, you need to select a theme first: <>![Documentation theme screenshot](/assets/docs-theme.png) <>![Blog theme screenshot](/assets/blog-theme.png) If you want to use Nextra without using these built-in themes, you can follow the [Custom Theme](/docs/custom-theme) docs. ## FAQ The Nextra FAQ is a collection of useful questions and answers about the project. If you have a question that isn't answered here, please [open a discussion](https://github.com/shuding/nextra/discussions).

{/* prettier-ignore */}

Can I use Nextra with Next.js `pages` router?

Nextra 4 only works with the `app` router. Only Nextra 1/2/3 supports the `pages` router.

Can I use X with Nextra?

The answer is "yes" for most things. Since Nextra is just a Next.js plugin, almost all the things that can be done with React can be done with Nextra. Here are some examples and guides: - [Use Tailwind CSS](/docs/guide/tailwind-css) - [Use custom CSS and Sass](/docs/guide/custom-css) - [Use custom fonts](https://nextjs.org/docs/basic-features/font-optimization)

{/* prettier-ignore */}

How can I add a live coding component in Nextra?

There are libraries like [Sandpack](https://sandpack.codesandbox.io) and [react-live](https://github.com/FormidableLabs/react-live) that can help you add live coding components to your MDX.

page.mdx File

`page.mdx` File