More Premium Hugo Themes Premium Nextjs Themes

Next Smooth Doc

smooth-doc in Nextjs implementation

Next Smooth Doc

smooth-doc in Nextjs implementation

Author Avatar Theme by lwz7512
Github Stars Github Stars: 42
Last Commit Last Commit: Oct 8, 2021 -
First Commit Created: Apr 22, 2023 -
Next Smooth Doc screenshot

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:

  1. Install Next.js and create a new project:
npx create-next-app my-docs
  1. Navigate to the project directory:
cd my-docs
  1. Install the required dependencies:
npm install next-mdx-remote @mdx-js/react
  1. Create a new file called docs.mdx in the pages directory and add your documentation content.

  2. Edit the pages/index.js file and add the following code to retrieve and render the docs.mdx file:

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
    },
  };
}
  1. Start the Next.js development server:
npm run dev
  1. 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.