Build a documentation site with Next.js using Nextra

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!

What is Nextra?

According to Nextra.site, 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.

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, React, Tailwind, Node.js, CodeSandbox 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:

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:

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

cd nextra-docs-template
pnpm i

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

pnpm dev

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

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:

Conclusion

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