I have the following content structure:

src 
|-- content
    |-- terms-conditions.html
    |-- makeup.html

The terms and conditions page has the following data which I can call

{ seo: 
     url: "makeup/terms-conditions"
}

I'd like the content of terms-conditions.html to actually show under the url makeup/terms-conditions. I've tried a few times using getStaticPaths to no avail so any guidance would be appreciated. Essentially all of my files will sit one level down from content but I'd like to actually serve them under the URL defined under seo/url

My getStaticPaths code in my [params].tsx file is as follows.

export async function getStaticPaths() {
  const posts = getAllPosts(["slug"]);
  return {
    paths: posts.map((post) => {
      return {
        params: {
          slug: post.slug,
        },
      };
    }),
    fallback: false,
  };
}

getStaticProps:

export async function getStaticProps({ params }) {
  const post = getPostBySlug(params.slug, ["slug", "data"]);
  const content = (await post.content) || "";

  return {
    props: {
      post: {
        ...post,
        content,
      },
    },
  };
}

And in my api file I have:

import fs from "fs";
import { join } from "path";
import matter from "gray-matter";

const postsDirectory = join(process.cwd(), "src/content");

export function getPostSlugs() {
    return fs.readdirSync(postsDirectory);
}

export function getPostBySlug(slug: string, fields = []) {
    const realSlug = slug.replace(/\.html$/, "");
    const fullPath = join(postsDirectory, `${realSlug}.html`);
    const fileContents = fs.readFileSync(fullPath, "utf8");
    const { data, content } = matter(fileContents);
    const items = { };
    fields.forEach((field) => {
    if (field === 'slug') {
      items[field] = realSlug
    }
    if (field === 'data') {
      items[field] = data
    }

  })
    return items;
}

export function getAllPosts(fields = []) {
  const slugs = getPostSlugs()
  const posts = slugs
    .map((slug) => getPostBySlug(slug, fields))
  return posts
}