Tengo la siguiente estructura de contenido:

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

La página de términos y condiciones tiene los siguientes datos a los que puedo llamar

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

Me gustaría que el contenido de terms-conditions.html se muestre bajo la url make/terms-conditions. Intenté varias veces usar getStaticPaths sin éxito, por lo que agradecería cualquier orientación. Esencialmente, todos mis archivos estarán un nivel por debajo del content pero en realidad me gustaría servirlos bajo la URL definida en seo/url

Mi código getStaticPaths en mi archivo [params].tsx es el siguiente.

 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, }, }, }; }

Y en mi archivo api tengo:

 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 }