Manual Installation

Manual Installation of Docstra in your existing Next.js project.

Follow the Steps

Follow these steps to set up Docstra in your project.

1. Install Docstra:

Install Docstra using your preferred package manager:

Terminal
1npm install docstra

Note: Note: Docstra currently supports only Next.js. Official documentation for other frameworks will be added soon.

2. Configure Docstra:

Create a docstra.config.ts file in your project’s root directory and add your configuration:

docstra.config.ts
1import { defineDocstraConfig } from "docstra/config";
2
3export default defineDocstraConfig({
4    siteName: "Docstra",
5    githubRepo: "https://github.com/sudhucodes/docstra",
6    contentDir: "app/docs/content",
7    editOnGithub: {
8        owner: "sudhucodes",
9        repo: "docstra",
10        path: "docs/content",
11    },
12    feedback: {
13        enabled: true,
14        formSyncFormID: "69c728a1-ccd2-4dab-a9f7-bb52baeb4d31",
15    },
16    navbar: {
17        logo: {
18            link: "/",
19            src: "/brand/logo.svg",
20            alt: "Logo",
21            className: "h-8 w-auto",
22        },
23        links: [
24            { name: "Guides", href: "/docs/guides" },
25            { name: "Examples", href: "/docs/examples" },
26        ],
27    },
28    sidebar: {
29        links: [
30            {
31                section: 'Section 1',
32                items: [
33                    {
34                        name: 'Link 1',
35                        href: '/docs/link-1',
36                        icon: '<Any-Lucide-Icon>'
37                    },
38                    {
39                        name: 'Link 2',
40                        href: '/docs/link-2',
41                    },
42                ],
43            },
44            {
45                section: 'Section 2',
46                items: [
47                    { name: 'Link 3', href: '/docs/link-3' },
48                ],
49            },
50        ],
51    },
52});

3. Create Source Entry:

1. Create a lib folder inside the app directory
2. Inside lib, create a source.ts file
3. Paste the following code:

lib/source.ts
1import { docs } from "@/.docstra/index";
2import { createSource } from "docstra/server";
3
4export const source = createSource(docs);

This enables dynamic routing for all your documentation pages.

4. Create the Components Entry:

1. Create a mdx-components.tsx file inside the app directory
2. Paste the following code:

mdx-components.tsx
1import { defaultMdxComponents } from "docstra/server";
2import { DocstraCodeBlock } from "docstra";
3
4export function useMDXComponents() {
5    return {
6        ...defaultMdxComponents,
7        code: DocstraCodeBlock
8    };
9}

5. Create the Docs Route:

1. Create a docs folder inside the app directory
2. Inside docs, create a folder named [[...slug]]
3. Inside that folder, create a page.tsx file

app/docs/[[...slug]]/page.tsx
1import docstraConfig from "@/docstra.config";
2import { useMDXComponents } from "@/mdx-components";
3import {
4    DocstraBody,
5    DocstraHeader,
6    DocstraPage,
7    DocstraProvider,
8} from "docstra";
9
10import { source } from "@/lib/source";
11import { notFound } from "next/navigation";
12
13export default async function Page({ params }: {
14    params: Promise<{ slug?: string[] }>
15}) {
16    const { slug } = await params
17    const page = source.getPage(slug);
18    if (!page) return notFound();
19
20    const MDX = page.body;
21
22    return (
23        <DocstraProvider 
24            docstraConfig={docstraConfig} 
25            docs={source.files} 
26            pageData={page.info}
27        >
28            <DocstraHeader />
29            <DocstraPage>
30                <DocstraBody>
31                    <MDX components={useMDXComponents()} />
32                </DocstraBody>
33            </DocstraPage>
34        </DocstraProvider>
35    );
36}
37
38export function generateStaticParams() {
39    return source.generateStaticParams();
40}
41
42export async function generateMetadata({ params }: {
43    params: Promise<{ slug?: string[] }>
44}) {
45    const { slug } = await params
46    const page = source.getPage(slug);
47    if (!page) return notFound();
48
49    return {
50        title: page.info.data.metadata.title,
51        description: page.info.data.metadata.description,
52    }
53}

This enables dynamic routing for all your documentation pages.

5 Import CSS File

If you are already using Tailwind CSS, import the CSS file in your globals.css file:

globals.css
1@import 'docstra/css';

Note: If you are not using Tailwind CSS then you need to install Tailwind CSS and import the CSS file in your globals.css file.

6. Create Your First Content Page

Now add your first MDX documentation file:

1. Inside app/docs, create a content folder
2. Inside content, create index.mdx

app/docs/content/index.mdx
1---
2title: Docstra
3description: Welcome to the Docstra documentation!
4---
5
6# Overview
7
8Docstra is a modern documentation framework
9built specifically for Next.js.
10
11You can start writing your MDX content here.

You’re All Set!

Visit:

Open in Browser
1http://localhost:3000/docs

You should now see your first documentation page live 🎉

Intergrating FormSync is easy. Just add the following code to your docstra.config.ts file:

Checkout the FormSync Docs and get your FormSync FORM_ID.

After getting your FORM_ID, add that in the docstra.config.ts file:

docstra.config.ts
1import { defineDocstraConfig } from "docstra/config";
2
3export default defineDocstraConfig({
4    // your rest of the config
5    feedback: {
6        enabled: true,
7        formSyncFormID: "FORM_ID",
8    },
9});

Replace FORM_ID with your actual FORM_ID.

Happy documenting! :)