Aller au contenu principal

Urls

Dans ce docs, on va détailler le processus mise en place pour gérer les urls dynamiques des contenus issus du CMS de Maps system.

Segment dynamique de Next.js​

Afin de gérer des paramètres dynamique des urls, Next nous offre la possibilité de définir des segments dynamiques

Dans l'arborescence du router, on retrouvera des noms de dossier avec le partern suivant

 /[myVar]

Ici myVar représente une variable dans l'url. Cette variable est accessible dans les props de la page associé à ce noeud du router, dans l'objet params Par défaut, Next authosise toutes les valeurs possibles, mais il est possible de restreindre l'accès à certaine valeur.

Generating Static Params​

Generating Static Params Le but de cette fonction est de définir les valeurs possibles pour un segment donné afin de générer au build les pages afin de pouvoir les rendrent statiquement. Cette fonction est appelé côté serveur à chaque requête quand on a la varaible d'environement NODE_ENV=development. Sinon elle est exécuter une fois au build.

On peut, en complement de cette fonction, ajouter l'export suivant:

export const dynamicParams = false;

Dans ce cas, uniquement les valeurs retournées par generateStaticParams ne seront valide dans le router next. Si on visite une url inconnue => 404. Si ce paramètre est absent ou à true, alors essayera de rendre la page en côté serveur.

Revalidate: intéraction entre Next et Fetch​

Next.js et l'api fetch ont une relation privilégiée. L'équipe de Next à étendu le comportement de fetch afin d'inclure du cache Fetch cache

Il est également possible de regénérer des pages qui on été rendu statiquement. On peut régler un TTL manuellement page par page grace à revalidate

On peut également mettre en place une mécanique de revalidation à la demande avec revalidatePath

Url en V4​

Le CMS de Maps Systems nous fournis diverse collections de documents: établissements, chambres, homepages, etc... Chaque collection dispose d'un attribut label qui est traduit en FR / EN / NL Ce champ est transformé en slug à l'embasement. Le français étant la langue par défaut si une traduction n'existerais pas.

Afin d'associer les templates de pages de Next aux données récupérer du PIM, nous devons recomposer nos urls en retournant via generateStaticParams TOUTES les combinaisons possibles de paramètres dynamiques de l'url.

Composition des URLs​

  • odalys-vacances.com/ : Homepage
  • odalys-vacances.com?part=X : Homepage partenaire => url technique /homepage/[partId]
  • odalys-vacances.com/typeDeVacance: sous homepage type de vacances
  • odalys-vacances.com/typeDeVacance/place: page de recherche place (pays ou région)
  • odalys-vacances.com/typeDeVacance/place/station: page de recherche station
  • odalys-vacances.com/typeDeVacance/place/produit: page produit (établissement ou package)
  • odalys-vacances.com/thematique/theme: Homepage thématique
  • odalys-vacances.com/theme: page recherche thématique => url technique /thematicPage/[slug]
  • odalys-vacances.com/guide: page statique guide => url technique /guide/[slug]
  • odalys-vacances.com/page-v4: page statique v4 => url technique /page-v4/[slug]
  • odalys-vacances.com/page-standard: page statique standard => url technique /page-standard/[slug]
  • odalys-vacances.com/cgos/page-cgos: page statique cgos

En gras, les segments dynamiques de l'url.

Pour les URL technique, voir le chapitre Rewrite d'url

Cas particulier: Slug des types de vacances​

Dans le CMS Maps, les sous homepage type de vacances nom pas de slug, mais elles sont rattachées à un type de vacances. Pour récupérer le slug associé à un type de vacances, il faut intéroger Boom. Un collection gère les différents types de vacances et des apis sont diponibles pour récupérer ces infos.

Récupération du slug à partir d'un ID

https://admin.nonprod-web.odalys-aws.com/api/vacationTypes/code/58

Récupérer l'id du type de vacances à partir d'un slug

https://admin.nonprod-web.odalys-aws.com/api/vacationTypes/slug/location-mer

Récupérer toute la collection de types de vacances

https://admin.nonprod-web.odalys-aws.com/api/vacationTypes

Traductions et URL​

On utilise NextIntl pour gérer les traductions sur le site. NextIntl rajoute un noeud [locale] en entrée du router. Il ne faudra pas oublier de le renseigner dans generateStaticParams Ce paramètre n'est pas présent dans l'url final, mais sert a choisir le bon sous-domaine du site. Configuration par domaine

Ex:

NextIntl permet également de traduire nos urls: Localized PathNames

Ex:

Rewrite d'url​

Le modèle SEO d'Odalys-vacances présente un point de complexité qu'il faut régler via des réécritures d'url. En effet, il existe plusieurs urls qui partage un pattern commun dans le structure, mais affiche des templates de page complètement différente.

Par exemeple

Malheuresement, Next ne nous permet pas d'avoir deux segments dynamique au même niveau.

Pour pallier à cette limitation technique, la solution adopter consite a créer une "route technique" dans le routeur Next et de générer une règle de réécriture d'url pour faire matcher la "bonne url" d'un point de vue SEO vers la "route technique"

Exemple avec les urls ci-dessus

Dans next on construit du répertoire dynamique avec un préfix statique pour différencier les deux templates

/[vacationType]/page.tsx
/thematicPage/[slug]/page.tsx

Il s'agit bien de deux routes différentes pour Next

Via generateStaticParams, on rend les urls suivante

une url "classique": OK SEO
/location-montagne
une url "technique": KO SEO
/thematicPage/vacances-dernieres-minutes

Étant donnée qu'on toutes les infos pour construire les urls dans generateStaticParams, on a également toutes les infos pour savoir qu'elles sont les urls "classiques" et les urls "techniques"

On rajoute un règle de réécriture
si on me demande l'url /vacances-dernieres-minutes, je sais que c'est une page de recherche thématique, car j'ai tout les slugs en base, donc je réécrit l'url
en /thematicPage/vacances-dernieres-minutes

Attention à ne pas confondre url rewriting et url redirect

Rewrite change la destination de la page, sans modifier l'url, c'est transparent Ici: il demande /vacances-dernieres-minutes, mais on lui sert le contenu de /thematicPage/vacances-dernieres-minutes

Redirect nous renvoie vers une autre page, ça change l'url je demande /vacances-dernieres-minutes, je suis redirigé vers /thematicPage/vacances-dernieres-minutes dans mon navigateur

Documentation rewrite

Documentation redirect