Create a documentation website using NextJs and Nextra

💡

This walkthrough assumes basic knowledge of NextJs.

I don't know about you, but I have always wondered how documentation websites are built. Like how is that much content hosted and presented to the users? How is the search bar created? How is the entire thing maintained?

Well, I discovered a great tool that helps to do all that out of the box! NEXTRA (opens in a new tab)

Nextra is a static site generator (SSG) for NextJs that integrates MDX to help you build your website.

MDX is Markdown for the component era (from their website). It basically allows developers to use components inside markdown.

Now that we have all the necessary definitions out of the way, let's get started on how you can build your very own documentation website from your bed.

Create a new NextJs application

npx create-next-app@latest doc-website --tailwind

If you want to use TypeScript

npx create-next-app@latest doc-website --tailwind --typescript

Navigate to your application

Open up your application in your favorite code editor and install nextra
npm i nextra nextra-theme-docs

Build a Blog Using Sanity and ReactJs Build a Desktop App using Electron and NextJs