i'm a beginner to next and creating a libraru and docs so please excuse me if i'm stupid

basically, i'm trying to create docs for a number formatting library i'm doing for my portfolio, so i made a /docs folder inside my library folder and created a next app inside it, and since i'm hosting it on github pages, i edited the next.config.ts file (cus the link is username.github.io/numerica or something, and it also needs to be static):

import { NextConfig } from "next"

const nextConfig: NextConfig = {
    output: 'export',
    basePath: '/numerica',
    assetPrefix: '/numerica/',
    images: {
        unoptimized: true,
    },
}

module.exports = nextConfig

now the problem i'm having is i'm generating a json for my docs in the file docs/public/api/docs.json, and i'm trying to fetch that json in the main page like this:

"use client"
import { useEffect } from "react"

export default function Home() {
  useEffect(() => {
    fetch("/api/docs.json")
      .then(res => res.json())
      .then(data => console.log(data))
      .catch(err => console.error(err));
  }, []);

  return (<p>hello</p>);
}

people said that if it's in the /public folder i should just use a relative file path, but on the browser it says, could not find the json, i tried also doing ../../public... but that also doesn't work

here is the github repo if you need more info: https://github.com/alyshukry/numerica/tree/main