---
sidebarTitle: Introduction
---

import { Cards } from 'nextra/components'

# 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:

<Cards num={2}>
  <Cards.Card arrow title="Documentation theme" href="/docs/docs-theme/start">
    <>![Documentation theme](/assets/docs-theme.png)</>
  </Cards.Card>
  <Cards.Card arrow title="Blog theme" href="/docs/blog-theme/start">
    <>![Blog theme](/assets/blog-theme.png)</>
  </Cards.Card>
</Cards>

If you want to use Nextra without using these built-in themes, you can follow
the [Custom Theme](/docs/custom-theme) docs.

## Nextra 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).

<details open>
  <summary className="mb-2">Can I use Nextra with Next.js app router?</summary>
  No, Nextra only works with the `/pages` directory at the moment. Support for
  the app router has not been implemented yet. But you can use `/app` and
  `/pages` at the same time - just put your docs inside `/pages` and your other
  routes in `/app`
</details>

<details open>
  <summary className="mb-2">Can I use X with Nextra?</summary>
  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)

</details>

<details open>
  {/* prettier-ignore */}
  <summary className="mb-2">How can I add a live coding component in Nextra?</summary>
  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.
</details>
