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).
"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
.
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.