Динамичке руте су странице које вам омогућавају да користите прилагођене параметре у УРЛ-у. Посебно су корисни када креирате странице за динамички садржај.
За блог можете користити динамичку руту за креирање УРЛ-ова на основу наслова постова на блогу. Овај приступ је бољи од прављења компоненте странице за сваки пост.
Можете креирати динамичке руте у Нект.јс дефинисањем две функције: гетСтатицПропс и гетСтатицПатхс.
Креирање динамичке руте у Нект.јс
Да бисте креирали динамичку руту у Нект.јс, додајте заграде на страницу. На пример, [парамс].јс, [слуг].јс или [ид].јс.
За блог, можете користити пуж за динамичку руту. Дакле, ако је пост имао пуж динамиц-роутес-нектјс, резултирајући УРЛ би био https://example.com/dynamic-routes-nextjs.
У фасцикли пагес, креирајте нову датотеку под називом [слуг].јс и креирајте компоненту Пост која узима податке из објаве као пропрат.
конст Пост = ({ постДата }) => {
повратак <див>{/* садржај */}</div>;
};
Постоје различити начини на које можете да проследите податке о постом. Метод који изаберете зависи од тога како желите да прикажете страницу. Да бисте преузели податке током времена израде, користите гетСтатицПропс(), а да бисте их преузели на захтев, користите гетСерверСидеПропс().
Коришћење гетСтатицПропс за преузимање података о објављивању
Постови на блогу се не мењају тако често и довољно је да их преузмете у време израде. Дакле, измените компоненту Пост тако да укључује гетСтатицПропс().
увоз { гетСинглеПост } из "../../утилс/постс";конст Пост = ({ цонтент }) => {
повратак <див>{/* садржај */}</div>;
};
извозконст гетСтатицПропс = асинц ({ парамс }) => {
конст пост = чекати гетСинглеПост (парамс.слуг);
повратак {
реквизити: { ...пост },
};
};
Функција гетСтатицПропс генерише податке објаве приказане на страници. Користи пуж из путања које генерише функција гетСтатицПатхс.
Коришћење гетСтатицПатхс за преузимање путања
Функција гетСтатицПатхс() враћа путање за странице које би требало да буду унапред приказане. Промените Пост компоненту да бисте је укључили:
извозконст гетСтатицПатхс = асинц () => {
конст путање = гетАллПостс().мап(({ пуж }) => ({ парамс: { пуж} }));
повратак {
стазе,
повући се: лажно,
};
};
Ова имплементација гетСтатицПатхс преузима све постове које треба да буду приказане и враћа пужеве као параметре.
Све у свему, [слуг].јс ће изгледати овако:
увоз { гетАллПостс, гетСинглеПост } из "../../утилс/постс";конст Пост = ({ цонтент }) => {
повратак <див>{цонтент}</div>;
};извозконст гетСтатицПатхс = асинц () => {
конст путање = гетАллПостс().мап(({ пуж }) => ({ парамс: { пуж} }));
повратак {
стазе,
повући се: лажно,
};
};извозконст гетСтатицПропс = асинц ({ парамс }) => {
конст пост = чекати гетСинглеПост (парамс.слуг);повратак {
реквизити: { ...пост },
};
};
извозУобичајено Пошта;
Морате користити гетСтатицПропс() и гетСтатицПатхс() заједно да бисте креирали динамичку руту. Функција гетСтатицПатхс() треба да генерише динамичке руте, док гетСтатицПропс() преузима податке приказане на свакој рути.
Креирање угнежђених динамичких рута у Нект.јс
Да бисте креирали угнежђену руту у Нект.јс, потребно је да креирате нову фасциклу унутар фасцикле пагес и да сачувате динамичку руту у њој.
На пример, да бисте креирали /пагес/постс/динамиц-роутес-нектјс, сачувајте [слуг].јс унутра /pages/posts.
Приступ параметрима УРЛ-а из динамичких рута
Након креирања руте, можете преузети УРЛ параметар са динамичке руте користећи усеРоутер() Реаговати кука.
За странице/[слуг].јс, узмите пуж овако:
увоз { усеРоутер } из 'следећи/рутер'конст Пост = () => {
конст рутер = усеРоутер()
конст { слуг } = роутер.куери
повратак <стр>Пост: {слуг}</п>
}
извозУобичајено пошта
Ово ће приказати ознаку поста.
Динамичко рутирање са гетСерверСидеПропс
Користећи Нект.јс можете преузети податке у време израде и креирати динамичке руте. Ово знање можете користити да унапред прикажете странице са листе ставки.
Ако желите да преузмете податке о сваком захтеву, користите гетСерверСидеПропс уместо гетСтатицПропс. Имајте на уму да је овај приступ спорији; требало би да га користите само када користите податке који се редовно мењају.
