Nextra

Nextra (opens in a new tab) is a framework on top of Next.js, that lets you build content focused websites. It has all the great features from Next.js, plus extra power to create Markdown-based content with ease.

In this guide, you'll set up docsly in your Nextra documentation project.

Prerequisites

Before proceeding with this guide, ensure you've the publicId copied from your docsly dashboard (opens in a new tab).

To copy the publicId, in the dashboard go to Settings > API keys section and click Copy Public ID.

ℹ️

You must use the publicId from the development project in your dashboard while testing locally.

Installation

Install the latest version of @docsly/react package using your favourite package manager.

pnpm add @docsly/react
# or
yarn add @docsly/react
# or
npm install @docsly/react

Initializing docsly

To use docsly in your project, you need to initialize it using with the publicId and pathname (see component to learn more about props). In Next.js 13, you can get the pathname using the usePathname hook from next/navigation.

The code below creates a React Client Component using the "use client" directive to avoid rendering this component on server and initializes the component's styles.

To initialize docsly,

Create a new file DocslyClient.tsx in the ./components folder.
Copy the below code and paste it in the newly created file.
Replace the publicId copied from the docsly dashboard (opens in a new tab).

./components/DocslyClient.tsx

"use client";
import Docsly from "@docsly/react";
import "@docsly/react/styles.css";
import { usePathname } from "next/navigation";
 
export default function DocslyClient() {
  const pathname = usePathname();
  return <Docsly publicId="<copied-from-dashboard>" pathname={pathname} />;
}

Using docsly

With your DocslyClient component ready, import the component inside the theme.config.tsx file and use it within the footer component.

./theme.config.tsx

import React from "react";
import { DocsThemeConfig } from "nextra-theme-docs";
import DocslyClient from "./components/DocslyClient";
 
const config: DocsThemeConfig = {
  logo: <span>docsly</span>,
  footer: {
    text: "Docsly Nextra Template",
    component: () => (
      <>
        {/* Your footer code */}
        <DocslyClient />
      </>
    ),
  },
};
 
export default config;

🥳 Your documentation is now ready to receive interactive feedback using docsly.

⚠️

To avoid misuse of the development project's private ID, you must create a new project and use it's publicId when deploying your project.

Example project

We've a Nextra template project working with the latest @docsly/react package hosted live at nextra.docsly.dev (opens in a new tab).

You can also check out the code on GitHub (opens in a new tab).

next-js docusaurus