Dynamic page creation using files from a particular directory

[IamLizu]

I have a component that is the default layout for all pages in my application. I want this component to read a particular directory and link existing files within the component. To be very clear, I am generating pages dynamically with the files available in the directory.

Now the problem is, this component of mine is not inside of /pages folder and using getStaticProps outside this directory is restricted.

import { getSortedPageData } from '../lib/pages'


export async function getStaticProps() {
    const allPagesData = getSortedPageData()
    return {
        props: {
            allPagesData
        }
    }
}

export default function Layout({ allPagesData }) {
return(
    <Navbar color="faded" light>
    <Collapse isOpen={!collapsed} navbar>
        <Nav navbar>
            {allPagesData.map(({ page, title }) => (
                <NavItem key={page}>
                    <Link href="/[page]" as={page}>
                        <a>
                            <NavLink>{title}</NavLink>
                        </a>
                    </Link>
                </NavItem>
            ))}
        </Nav>
    </Collapse>
    </Navbar>
)}

So, I can't actually do this what I wrote above. What should I do on this situation?

The problem only arise when I am creating Links like above in the component, because it is outside the /pages dir. I have no issue generating dynamic pages for the files.

Please advise,
thanks.

[IamLizu]

Here's what I did to solve the problem. I generated a .json file with the pages yaml data and imported here in this component. All I needed just to do this, because page generation works anyway as it is done from the /pages dir.

Thanks to this answer on StackOverflow, I partially followed it.