@visulima/nextra-theme-docs v4.0.26
Nextra, Tailwind CSS, Next.js, giscus, react-hot-toast,
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
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago