Introduction

Nextra is a Next.js based static site generator.

It supports Markdown and React components (MDX), automatically generated sidebar and anchor links, file-system based routing, built-in syntax highlighting, image optimization, custom layouts, i18n, and all the features you love about Next.js.

Here’s what you will get in 1 minute:


console.log("hello, world");

example.tsx


import { useState } from "react";
 
function Counter(): React.ReactElement {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}


 ✓ src/index.test.ts (1)
   Test Files  1 passed (1)
        Tests  1 passed (1)
     Start at  23:32:41
     Duration  11ms
   PASS  Waiting for file changes...
         press h to show help, press q to quit

Click here to read more.

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.


npx shadcn/create-nextra@latest my-docs


pnpm dlx shadcn/create-nextra@latest my-docs


yarn dlx shadcn/create-nextra@latest my-docs


bun x shadcn/create-nextra@latest my-docs