Next.js course template
This repository contains the source code for a Next.js app you can use to publish an interactive course with React.
This template was created to be used on my course on React hooks at useEffect.dev.
- Write lessons using MDX.
- Create sublessons to organize your course content.
- Embed source code in several languages.
- Embed interactive and editable React examples.
- Use the template as a base, customize it for your needs!
This template uses:
- Next.js, using static site generation by default.
- next-mdx-remote and remark to parse Markdown.
- Prism to highlight the source code examples, with the Dracula theme.
- React Live to embed interactive and editable examples.
- TailwindCSS for styling.
- Clone or fork this repository
- Install dependencies:
- Run the app:
- Open http://localhost:3000 and enjoy
The lessons are located in
Because of the current implementation (that you are free to improve), here are the rules the lessons must follow:
- The files must named with
- The header (between
---) must include a
titleand a type (
- For sublessons, the
parentattribute in the header must refer to a valid lesson, and please don’t create loops
- The lessons filenames should be all lowercase.
- The lessons filenames give the order the lessons will be displayed, so I recommend prefixing them with an index number or letter.
Please submit an issue (or better, a pull request) if you want to report a problem or suggest an improvement.
But also know that this template is offered free of charge, and I can’t guarantee to fix all problems