Next.js

In this guide, you'll set up docsly in your Next.js 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).

./app/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 app/layout.tsx file and use it within the body.

./app/layout.tsx

import React from "react";
import DocslyClient from "./DocslyClient";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <DocslyClient />
      </body>
    </html>
  );
}

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

⚠️

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

Frameworks nextra