NextJS routing - różne template dla slugów

0

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ć?

0

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

0

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

0

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 ?

1

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1