Build your own platform for books in React
With the software in this article, you can load any existing GitBook (popular software for writing books on GitHub) into Next.js and start adding any custom elements you want. Things like:
You can easily build a book with Next.js and MDX, but this is more than a book! It is an extensible educational website (if you aren’t afraid of writing some code). Let’s get into it!
MDX is Markdown with JSX. It is a file with both markdown and JSX (React elements) that has an extension .mdx. This is the language I use to write the books. We want to be compatible with existing GitBooks, which are just Markdown, so there is no problem with loading in existing GitBooks.
The GitHub repository for a book should not have any code in it. This gives people the impression that your book is some new code base to learn when it should just be a bunch of plain text files.
To separate our content from our code, we use a library called next-mdx-remote and grab code using a request to
raw.githubusercontent like so:
import renderToString from "next-mdx-remote/render-to-string"; import axios from 'axios' source = await(await axios.get("https://raw.githubusercontent.com//Open-EdTech/next-mdx-books/main/DOCS/generate.md")).data; const mdxSource = await renderToString(source);
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.