Overview:
NextJS Smooth Doc is a minimal doc generator based on Next.js and mdx. It was migrated from smooth DOC in just 4 days in order to compare the framework difference. According to the author, using Next.js is more enjoyable and easy to implement compared to Gatsby.js.
Features:
- Minimal Doc Generator: NextJS Smooth Doc is designed to generate minimalistic documentation.
- Based on Next.js & mdx: It is built on top of Next.js, a popular React framework, and makes use of mdx, which allows you to write JSX in markdown files.
- Easy to Implement: The author claims that Next.js is easier to implement compared to Gatsby.js.
- Migration: NextJS Smooth Doc was migrated from smooth DOC in just 4 days, showcasing the ease of migration between the two frameworks.
Installation:
To install NextJS Smooth Doc, follow these steps:
- Install Next.js and create a new project:
npx create-next-app my-docs
- Navigate to the project directory:
cd my-docs
- Install the required dependencies:
npm install next-mdx-remote @mdx-js/react
Create a new file called
docs.mdxin thepagesdirectory and add your documentation content.Edit the
pages/index.jsfile and add the following code to retrieve and render thedocs.mdxfile:
import { getMdxNode } from 'next-mdx-remote';
import { MDXRemote } from 'next-mdx-remote';
import DocsLayout from '../components/DocsLayout';
import { getContent } from '../lib/docs';
export default function Home({ mdxSource }) {
return (
<DocsLayout>
<MDXRemote {...mdxSource} components={{/**/}} />
</DocsLayout>
);
}
export async function getStaticProps() {
const content = await getContent();
const mdxNode = getMdxNode(content);
return {
props: {
mdxSource: mdxNode
},
};
}
- Start the Next.js development server:
npm run dev
- Access your NextJS Smooth Doc documentation at
http://localhost:3000.
Summary:
NextJS Smooth Doc is a minimal documentation generator based on Next.js and mdx. It offers an easy-to-implement approach for generating documentation and has been successfully migrated from smooth DOC to Next.js in just a few days. The framework comparison indicates that implementing Next.js for documentation is more enjoyable.