This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

---

Making a markdown renderer in NextJS with the same features as Chirpy

There are 2 main ways to render markdown documents with the Paper starter template:

• Via a standard NextJS entry-point
• Via Nextra's intergrated routes

NextJS entry-point

Paper is a dedicated toolset for NextJS to render pure markdown files effectively.

We have the following components in the API:

• RemoteMarkdown. Which renders markdown files from a source URL. This is a standalone component for rendering markdown files from a url
• Markdown. A Standard Markdown display component. This is used to dangerouslySetInnerHTML for compiled markdown outputs. It uses a preconfigured CSS library for its rich format.
• MarkdownToHTML2 A UnifiedJS compiler-set. Compiles a Markdown source file to HTML.

However Mdx support is not part of ths jsx entry-point toolset. To render Mdx files, Nextra's intergration is required.

Nextra

Nextra is a NextJS plugin for markdown and Mdx. It comes with a set of features that enable .md and .mdx files within the pages directory to compile directly to HTML. It can be said to be a superset of next-mdx

The files compiled are also indexed during built-time to enable client-side search library intergration.

Nextra comes with 2 default themes that supports features like "table of content", "markdown-page wide search", "sidebar navigation" straight out the box. However, these features' APIs are not directly exposed for tinkering/reuse, and thus constructing your own custom layouts to support these existing features would require reimplementing some of the component logics from sratch.

Paper provides layout level components and helper functions that targets Nextra's pageOpts API to allow building Nextra themes more easily.

Example pageOpts looks like the following:

{
    "filePath":"pages/mds/index.mdx",
    "pageMap":[
        {
            "name":"mds",
            "route":"/mds",
            "children":[
                {
                    "data":{
                        "index":"Introduction",
                        "another":"Another Page",
                        "advanced":"Advanced (A Folder)",
                        "about":{
                            "title":"About",
                            "type":"page"
                        },
                        "contact":{
                            "title":"Contact ↗",
                            "type":"page",
                            "href":"https://twitter.com/shuding_",
                            "newWindow":true
                        }
                    }
                },
                {
                    "name":"about",
                    "route":"/mds/about",
                    "frontMatter":{
                        "sidebarTitle":"About"
                    }
                },
                {
                    "name":"advanced",
                    "route":"/mds/advanced",
                    "children":[
                        {
                            "name":"satori",
                            "route":"/mds/advanced/satori",
                            "frontMatter":{
                                "sidebarTitle":"Satori"
                            }
                        }
                    ]
                },
                {
                    "name":"advanced",
                    "route":"/mds/advanced",
                    "frontMatter":{
                        "sidebarTitle":"Advanced"
                    }
                },
                {
                    "name":"index",
                    "route":"/mds",
                    "frontMatter":{
                        "sidebarTitle":"Index"
                    }
                }
            ]
        }
    ],
    "frontMatter":{
        
    },
    "title":"Introduction"
}

_posts directory

This directory demonstrates renderring of markdown files with frontmatter. Markdown file frontmatters are