Build a documentation site with Next.js using Nextra
Tags: nextjs, react, documentation, webdev
Published: 2023-06-16 22:41:23

A documentation website contains information, guides, and instructions about a particular topic. Information on a documentation website should be easy to find, well-organized, and straightforward.

When creating a documentation website, you should closely examine its navigation, design, content organization, and search functionality. This will enable your users to find their desired information quickly and easily. 

Do you know there is a framework on top of Next.js that does all this for you out of the box? It’s [Nextra](https://nextra.site/docs)!

## What is Nextra?
According to [Nextra.site](https://nextra.site/docs), 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. 
You can read about Nextra here: [More about Nextra](https://nextra.site/). 

With Nextra, you can create a full-blown documentation site with search functionality, syntax highlighting, embedding React components into  MDX files, and more.

Some companies that use Nextra for their documentation sites include [Next.js](https://nextjs.org), [React](https://reactjs.org), [Tailwind](https://tailwindcss.com), [Node.js](https://nodejs.org/en), [CodeSandbox](https://codesandbox.io/docs/learn/introduction/overview) and more.

## Features of Nextra

- Light and dark mode theme.

- Advanced syntax highlighting for code snippets.

- Ability to use React components in markdown files.

- Full-text search functionality.

> 💡 This article assumes you have a basic knowledge of Git.

## Getting Started With Nextra
A ready-made template for a documentation site is available on Nextra’s git repository. So you have to clone the repository on your machine.

Now, in your terminal, run:

```javascript
git clone https://github.com/shuding/nextra-docs-template
```

Once you've cloned the git repository on your machine, you should have a folder structure like this:

![Nextra docs template folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbc5i67owbagf4rg3vhf.PNG)

Now that you've cloned the repository navigate into the project directory and install the dependencies: 

```javascript
cd nextra-docs-template
pnpm i
```

When the installation is complete, start the local development server by running the following:

```javascript
pnpm dev
```
Next, visit `localhost:3000` in the web browser to check if the documentation template is installed correctly. Your page should look this: 


![nextra docs template installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu7n7q048s2rngky3vgo.png)

The Nextra documentation template is installed successfully.🎉
Now you can customize any page to your liking.

If you do want to create a new `.mdx` file in the `pages` folder, always ensure to use the name of the `.mdx` file as a key in your `_meta.json` file:

![use the same name in your mdx file as the key in the _meta.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ow4zez0w5v3jmxptkklw.png)

## Conclusion
That's how you create a documentation site with Next.js using Nextra. I hope you find this helpful.