@visulima/nextra-theme-docs

Visulima nextra-theme-docs

Nextra Docs Theme is a theme that includes almost everything you need to build a modern documentation website. It includes a top navigation bar, a search bar, a pages sidebar, a TOC sidebar, and other built-in components.
Visulima nextra-theme-doc is built on top of

Nextra, Tailwind CSS, Next.js, giscus, react-hot-toast,

^{Daniel Bannert's open source work is supported by the community on GitHub Sponsors}

Install

If you have a Nextra project, you can install the theme with:

npm install @visulima/nextra-theme-docs zod

yarn add @visulima/nextra-theme-docs zod

pnpm add @visulima/nextra-theme-docs zod

if you don't have a Nextra project, you can use the Next CLI to create one and install

npm install nextra @visulima/nextra-theme-docs zod

yarn add nextra @visulima/nextra-theme-docs zod

pnpm add nextra @visulima/nextra-theme-docs zod

Add Next.js Config

If not there create the following next.config.js file in your project’s root directory:

const withNextra = require("nextra")({
    theme: "@visulima/nextra-theme-docs",
    themeConfig: "./theme.config.jsx",
});

module.exports = withNextra();

// If you have other Next.js configurations, you can pass them as the parameter:
// module.exports = withNextra({ /* other next.js config */ })

Add Css style to your `pages/_app.{jsx,tsx,mdx}` file

import "@visulima/nextra-theme-docs/style";

import type { AppProps } from "next/app";
import Head from "next/head";
import type { FC, ReactElement } from "react";
import React from "react";

const MyApp: FC<AppProps & { Component: AppProps["Component"] & { getLayout?: (component: ReactElement) => ReactElement } }> = ({ Component, pageProps }) => {
    const getLayout: (component: ReactElement) => ReactElement = Component.getLayout ?? ((page) => page);

    return (
        <>
            <Head>
                <link as="font" crossOrigin="anonymous" href="/Inter.var.woff2" rel="preload" type="font/woff2" />
            </Head>
            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
            {getLayout(<Component {...pageProps} />)}
        </>
    );
};

export default MyApp;

Add `SkipNavLink` component your `pages/_document.{jsx,tsx,mdx}` file

import { SkipNavLink } from "@visulima/nextra-theme-docs/components";
import Document, { Head, Html, Main, NextScript } from "next/document";
import type { ReactElement } from "react";
import React from "react";

class MyDocument extends Document {
    public render(): ReactElement {
        return (
            <Html lang="en">
                <Head />
                <body className="relative">
                    <SkipNavLink />
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

Create Docs Theme Config

Lastly, create the corresponding theme.config.jsx file in your project’s root directory. This will be used to configure the Nextra Docs theme:

export default {
    logo: <span>My Nextra Documentation</span>,
    project: {
        link: "https://github.com/shuding/nextra",
    },
    // ...
};

Ready to Go!

Now, you can create your first MDX page as pages/index.mdx:

## Welcome to Nextra

Hello, world!

For more information, check out the Nextra documentation. You can also check the example project here.

Supported Node.js Versions

Libraries in this ecosystem make the best effort to track Node.js’ release schedule. Here’s a post on why we think this is important.

Contributing

If you would like to help take a look at the list of issues and check our Contributing guild.

Note: please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Credits

License

The visulima nextra-theme-docs is open-sourced software licensed under the MIT