Cześć, mam taką zagwostkę odnośnie routingu w NextJS. Zaznaczę, że podane URL muszą tak wyglądać i nie mam opcji manipulacji. Problem polega na tym, że mam route /products
z listą produktów oraz dalej mam /products/s/type,typ1,typ2/size,xl,xxl
gdzie po /s/
rozpoznaje, że listę produktów jest filtrowana, type
oraz size
są filtrami a wartości po przecinkach są wartościami danych filtrów. Za ten URL razem z filtrami odpowiada plik /pages/products/[[...slug]].tsx
w którym rozbijam sobie ten URL na filtry. Wszystko smiga, ale obecnie muszę stworzyć kolejny ULR z danym produktem /products/nazwa-produktu
i ten url oczywiście wpada w template strony z listą produktów a muszę dla niego stworzyć oddzielny tempplate. Czy znacie jakiś pattern czy sposób jak to najlepiej rozegrać?
Jednym ze sposobów może być zrobienie prostego warunku na podstawie typu i wyświetlenie odpowiedniego komponentu
import XView from '../components/x-view';
import DefaultView from '../components/default-view';
const ProductPage = ({ type }) => {
if (type === 'x') {
return <XView type={type} />
}
return <DefaultView type={type} />;
}
export async getServerSideProps() { // lub getStaticProps
/*
tutaj jakaś wspólna logika, która służy do pobrania danych
*/
}
Drugim sposobem może być dodanie jakiegoś /pages/products/[paramA]/[...slug].tsx
, gdzie paramA
to nazwa katalogu. O ile się nie mylę to te parametry można zagnieżdżać w dowolny sposób (https://stackoverflow.com/questions/58075798/dynamic-routing-with-multiple-parameters-in-next-js).
Opcja 2 raczej odpada bo to wymagało by renderowania całego, tego samego, komponentu zarówno przy filtrowaniu jak i przy bazowym widoku, a to by rodziło kolejne problemy. Postaram się póki co renderować strony warunkowo, dzięki
Niestety wracam z tematem... jakiś pomysł jak to rozwiązać, kiedy na stronie z listą musi być getServerSideProps
a pojedynczy produkt już static czy li getSaticProps
?
Obecnie raczej nie można łączyć getServerSideProps
z getStaticProps
, więc jedynie wyjście jakie widzę to przeniesienie wspólnego kodu z komponentów / getServerSideProps / getStaticProps
do osobnych plików i spróbowania tej wersji z routingiem.