Создание страницы Dynami c с использованием файлов из определенного каталога - PullRequest
Новая
       4

Создание страницы Dynami c с использованием файлов из определенного каталога

1 голос
/ 18 июня 2020

У меня есть компонент, который является макетом по умолчанию для всех страниц в моем приложении. Я хочу, чтобы этот компонент читал определенный каталог и связывал существующие файлы внутри компонента. Чтобы быть предельно ясным, я создаю страницы динамически с файлами, доступными в каталоге.

Проблема в том, что этот мой компонент не находится внутри папки /pages, и использование getStaticProps вне этого каталога ограничено. 

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>
)}

Итак, я не могу сделайте то, что я написал выше. Что мне делать в этой ситуации?

Проблема возникает только тогда, когда я создаю ссылки, как указано выше, в компоненте, потому что они находятся вне каталога /pages. У меня нет проблем с созданием динамических c страниц для файлов.

Пожалуйста, сообщите, спасибо.

1 Ответ

0 голосов
/ 18 июня 2020

getStaticProps используется для выборки данных при времени сборки .

Вы можете расширить процесс сборки, написав собственный сценарий Node.js, который будет go просматривать файлы и создавать файл .json с информацией меню.

Созданный .json файл может быть импортирован в компонент Layout на стороне клиента.

Вам нужно будет расширить npm script build в package.json, чтобы next build и ваш скрипт запустился одной командой.

...