Next.js

Timvir assumes a very specific setup of your Next.js project. In particular:

• Source must be placed into the src/ folder, and consequently, pages are placed in src/pages/.
• Your components are placed into src/components/.
• Timvir assumes management of the src/pages/docs/components/ folder.
• Timvir specific integration code is placed into src/timvir/ (eg. src/timvir/toc.ts).

If you Next.js project has a compatible setup, follow these steps:

1. Add mdxjs support into your project.
2. Create a page wrapper. Copy the following code into src/timvir/wrapper.tsx:

3. Create (or update) your _app.tsx file to load the Timvir CSS:

4. Create your first Timvir page. Place the following code into src/pages/docs/index.mdx:

5. Open http://localhost:3000/docs/ to view the page you just created.