[{"_1":2,"_258":-5,"_259":-5},"loaderData",{"_3":4,"_237":238,"_253":254},"root",{"_5":6,"_7":8,"_15":-5,"_16":17,"_194":195,"_212":213,"_224":-5,"_225":226},"isDev",false,"honeypotInputProps",{"_9":10,"_11":12,"_13":14},"nameFieldName","name__confirm","validFromFieldName","from__confirm","encryptedValidFrom","MW6aSYC7X3QsYjaN9p02uCYpzUWzm+h0tjKspF1n5VDTsXnwJm2TsQY=","toastItem","latestArticles",{"_18":19,"_37":129},"articles",{"_18":20,"_120":121},[21,77,97],{"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_48":49,"_53":54,"_57":58,"_55":56,"_67":68},"published",true,"id","cma0ygz5s000dyk67f34wo2ts","title","Les 10 meilleurs hooks avec React Router 7 (anciennement Remix)","slug","les-10-meilleurs-hooks-avec-react-router-7-anciennement-remix","description","Voici 10 hooks que j'utilise le plus dans mes applications Remix / React Router 7. ","datePublished",["D",1736640000000],"content","Dans cet article, je partage avec vous mes **hooks** préférés pour [React Router 7](https://reactrouter.com/) (anciennement [Remix](https://remix.run)), que j’utilise dans quasiment tous mes projets.\n\n## 1. useOptionalUser\n\nC'est le hook que j'utilise le plus. Il permet de récupérer les informations optionnelles d'un utilisateur. Pour le faire fonctionner, il suffit de renvoyer un utilisateur dans le fichier `app/routes/root.tsx` (fichier racine d'une application Remix). Toute donnée chargée dans `root` est présente partout dans l'application (comme un contexte global).\n\n```tsx\nuseOptionalUser.tsx\nimport { useRouteLoaderData } from \"@remix-run/react\";\nimport type { loader } from \"app/root\";\n\nexport const useOptionalUser = () => {\n const data = useRouteLoaderData(\"root\");\n if (data?.user) {\n return data.user;\n }\n return null;\n};\n\nexport function useUser() {\n const maybeUser = useOptionalUser();\n if (!maybeUser) {\n throw new Error(\n \"No user found in root loader, but user is required by useUser. If user is optional, try useOptionalUser instead.\",\n );\n }\n return maybeUser;\n}\n```\n\nComme on utilise le type générique du hook `useRouteLoaderData`, ce hook renvoie une donnée typée. Merci Typescript !\n\n> Notez que l'on exporte également un hook `useUser` qui exploite le hook `useOptionalUser`, mais qui renvoie une erreur en cas d'utilisateur déconnecter. Cela permet de protéger les pages côté client en renvoyant une erreur en cas d'utilisateur non identifié.\n\n## 2. useTailwindScreenSizes\n\nJ'utilise ce hook pour afficher un bandeau indiquant la taille d'écran active de TailwindCSS. Ces dimensions utilises les valeurs par défaut, qu'on retrouve dans la [documentation officielle de TailwindCSS](https://tailwindcss.com/docs/responsive-design) \n\n```tsx\nuseTailwindScreenSizes\nimport React from \"react\";\n\nexport const useTailwindScreenSizes = ({\n initialWidth = 1280,\n}: {\n initialWidth?: number;\n}) => {\n const [currentWidth, setCurrentWidth] = React.useState(initialWidth);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleScreenResize = () => {\n const width = window.innerWidth;\n setCurrentWidth(width);\n };\n handleScreenResize();\n\n window.addEventListener(\"resize\", handleScreenResize);\n return () => {\n window.removeEventListener(\"resize\", handleScreenResize);\n };\n }, []);\n\n const getResponsive = () => {\n if (currentWidth > 1536) {\n return \"2xl\";\n }\n\n if (currentWidth > 1280) {\n return \"xl\";\n }\n\n if (currentWidth > 1024) {\n return \"lg\";\n }\n\n if (currentWidth > 768) {\n return \"md\";\n }\n if (currentWidth > 640) {\n return \"sm\";\n }\n\n return \"very small\";\n };\n return { currentWidth, getResponsive };\n};\n```\n\nJ'appelle ensuite ce hook dans un composant nommé `DevTool` que je place de manière absolue. Dans le fichier `root` par exemple.\n\n```tsx\nDevtool.tsx\nimport { useIsClient } from \"hooks/useIsClient.tsx\";\nimport { useTailwindScreenSizes } from \"hooks/useTailwindScreenSizes.tsx\";\n\nconst Devtool = ({\n initialScreenWidth = 1280,\n}: {\n initialScreenWidth?: number;\n}) => {\n const { currentWidth, getResponsive } = useTailwindScreenSizes({\n initialWidth: initialScreenWidth,\n });\n\n const isClient = useIsClient();\n if (!isClient) return null;\n return (\n \n {currentWidth}\n {getResponsive()}\n \n );\n};\n\nexport default Devtool;\n```\n\n## 3. useIsClient\n\nCe hook utilise-lui même un hook nommé `useIsClient`, n'affichant rien côté serveur (on affiche ce composant côté client).\n\n```tsx\nuseIsClient.tsx\nimport { useEffect, useState } from \"react\";\n\nexport function useIsClient() {\n const [isClient, setClient] = useState(false);\n\n useEffect(() => {\n setClient(true);\n }, []);\n\n return isClient;\n}\n```\n\n## 4. useGetUserPosition\n\nAvez-vous déjà eu besoin de connaître la position géographique des utilisateurs de votre site ? On parle ici de *latitude* et *longitude*, qui permettent de calculer la distance kilométrique entre deux points. \n\nC'est notamment utile pour géolocaliser l'utilisateur et lui proposer des données locales (c'est utilisé sur [Leboncoin](https://leboncoin.fr), [Airbnb](https://airbnb.com), [Uber](https://uber.com) ... \n\nJ'ai utilisé ce hook pour la recherche d'adresse de [GoodCollect](https://goodcollect.co).\n\n```tsx\nuseGetUserPosition.tsx\nimport { useState } from \"react\";\nimport { useToast } from \"components/shadcn-ui/use-toast.ts\";\n\nexport const useGetUserPosition = ({\n successFn = () => {},\n}: {\n successFn?: ({ lat, lng }: { lat: number; lng: number }) => void;\n}) => {\n const [latLng, setLatLng] = useState<{\n loading: boolean;\n latitude: number | null;\n longitude: number | null;\n canGeoLocate: boolean;\n }>({\n loading: false,\n latitude: null,\n longitude: null,\n canGeoLocate: true,\n });\n\n const { toast } = useToast();\n\n const getUserPosition = () => {\n if (!navigator.geolocation) {\n setLatLng((oldValues) => ({\n ...oldValues,\n canGeoLocate: false,\n }));\n return;\n }\n setLatLng((oldValues) => ({ ...oldValues, loading: true }));\n\n navigator.geolocation.getCurrentPosition(\n (position) => {\n const { latitude, longitude } = position.coords;\n\n setLatLng((oldValues) => ({\n ...oldValues,\n latitude,\n longitude,\n loading: false,\n }));\n\n successFn?.({ lat: latitude, lng: longitude });\n },\n (error) => {\n if (error.PERMISSION_DENIED) {\n toast({\n description:\n \"Votre navigateur n'a pas les permissions pour vous localiser. Vous pouvez l'activer dans les paramètres de votre navigateur.\",\n variant: \"error\",\n });\n } else if (error.TIMEOUT) {\n toast({\n description:\n \"La géolocalisation a pris trop de temps. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else if (error.POSITION_UNAVAILABLE) {\n toast({\n description:\n \"Votre position n'a pas pu être déterminée. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else {\n toast({\n description: \"Une erreur est survenue. Veuillez réessayer.\",\n variant: \"error\",\n });\n }\n setLatLng((oldValues) => ({\n ...oldValues,\n loading: false,\n }));\n },\n {\n timeout: 10_000,\n enableHighAccuracy: true,\n maximumAge: 60_000, // 60 seconds\n },\n );\n };\n return { getUserPosition, latLng };\n};\n```\n\nCe hook renvoie les valeurs suivantes : \n\n- la latitude et longitude\n- est-ce que l'utilisateur a accepté d'être géolocalisé / est-ce qu'il peut être géolicalisé\n- est-ce que la géolocalisation est en cours (booléen *loading*)\n\nPour connaître la position, nous utilisons l'API native `navigator.geolocation.getCurrentPosition`. \n\nCe hook utilise également le hook `useToast` qui est entièrement facultatif, et qui permet d'afficher une alerte en cas d'erreur. Ce hook est fourni avec le composant [toast](https://ui.shadcn.com/docs/components/toast) de la librairie **shadcn/ui**.\n\n## 6. useFileUpload\n\nCe hook permet d'afficher un fichier chargé depuis un *input* de type `file`. Le code est à adadpté à votre cas d'utilisation. Le cas d'utilisation n'accepte que les fichiers images ou de type PDF.\nIl met à disposition plusieurs propriétés pour réinitialiser l'input, afficher le fichier et savoir si c'est une image.\n\n```tsx\nuseFileUpload.tsx\nimport React from \"react\";\n\n// Takes a file path and returns the file name and extension\nconst checkFilenameFormat = ({\n fileName,\n allowedFormats = [\"jpg\", \"jpeg\", \"png\", \"heif\", \"avif\", \"webp\", \"pdf\"],\n}: {\n fileName: string;\n allowedFormats?: string[];\n}) => {\n const fileExtension = fileName.split(\".\").pop() || \"\"; // remove the dot\n\n // Only allow image files\n const isFormatAllowed = allowedFormats.includes(fileExtension);\n const isImage = fileExtension !== \"pdf\";\n return { isImage, isFormatAllowed, fileExtension };\n};\n\nexport const useFileUpload = () => {\n const [fileUpload, setFileUpload] = React.useState(null);\n const [documentPreview, setDocumentPreview] = React.useState(\n null,\n );\n\n interface HtmlFormElement extends HTMLInputElement {\n files: FileList;\n }\n const handleFileUpload = (e: React.ChangeEvent) => {\n const [file] = e.target.files || [];\n if (file) {\n setFileUpload(file);\n } else {\n setFileUpload(null);\n }\n };\n\n const isFileImage = React.useMemo(() => {\n if (!fileUpload) return null;\n const fileFormat = checkFilenameFormat({\n fileName: fileUpload?.name || \"\",\n });\n return fileFormat.isImage;\n }, [fileUpload]);\n\n // This create a preview of the file, as a URL\n React.useEffect(() => {\n if (!fileUpload) return;\n const objectUrl = URL.createObjectURL(fileUpload);\n setDocumentPreview(objectUrl);\n\n return () => URL.revokeObjectURL(objectUrl);\n }, [fileUpload]);\n\n const resetFileUpload = () => {\n setFileUpload(null);\n setDocumentPreview(null);\n };\n\n return {\n isFileImage,\n documentPreview,\n setFileUpload,\n fileUpload,\n handleFileUpload,\n resetFileUpload,\n };\n};\n```\n\nIl suffit de l'utiliser avec input de type \"file\" pour le faire fonctionner.\n\n```tsx\nconst { documentPreview, handleFileUpload, isFileImage, resetFileUpload } =\n useFileUpload();\n \n\n```\n\n## 7. useAddressCombobox\n\nJ'ai découvert ce hook en lisant l'article de [Kent C. Dodds](https://kentcdodds.com/) nommé [Full Stack Components](https://www.epicweb.dev/full-stack-components). \nDedans, il nous explique la notion de composant full-stack : On déclare une route, mais au lieu de renvoyer une vue directement, nous exportons depuis cette route un hook, qui est typé et que nous pouvons ensuite utiliser partout.\n\nParfait pour un *combobox* d'adresse autocomplétée par exemple. Je l'ai adaptée pour utiliser l'API de Google ([Places API](https://developers.google.com/maps/documentation/places/web-service/overview)) et obtenir l'auto-complétion des adresses.\n\nCe hook nécessite de télécharger deux librairies pour fonctionner :\n\n- [Downshift](https://www.downshift-js.com/), une librairie que Kent a lui-même mis en place lors de sa mission à Paypal\n- [spin-delay](https://github.com/smeijer/spin-delay) pour afficher un spinner (suffisamment longtemps lors des petits chargements)\n\n```tsx\nuseAddressCombobox\nimport { useFetcher, useSearchParams } from \"@remix-run/react\";\nimport { useCombobox } from \"downshift\";\nimport { useEffect, useId, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { AddressComboboxType } from \"routes/get-address\";\nimport { useSpinDelay } from \"spin-delay\";\n\nexport const useAddressCombobox = ({\n defaultAddress = null,\n defaultPlaceId = null,\n onAddressChange,\n}: {\n defaultAddress?: string | null;\n defaultPlaceId?: string | null;\n onAddressChange?: ({\n address,\n placeId,\n }: {\n address: string;\n placeId: string;\n }) => void;\n}) => {\n const addressFetcher = useFetcher();\n const addressAvailabilityFetcher = useFetcher();\n\n const id = useId();\n const addresses = addressFetcher.data?.addresses ?? [];\n type AddressType = (typeof addresses)[number];\n const [selectedAddress, setSelectedAddress] = useState<\n null | undefined | AddressType\n >({\n address: defaultAddress ?? \"\",\n id: defaultPlaceId ?? \"\",\n });\n // An errored address is an address that was suggested by Google, but that is not associated with a zipcode.\n const [searchParams] = useSearchParams();\n\n const cb = useCombobox({\n id,\n\n onSelectedItemChange: ({ selectedItem }) => {\n setSelectedAddress(selectedItem);\n },\n items: addresses,\n itemToString: (item) => (item ? item.address : \"\"),\n defaultInputValue:\n defaultAddress ??\n searchParams.get(\"address\") ??\n \"\",\n onInputValueChange: (changes) => {\n addressFetcher.submit(\n { search: changes.inputValue ?? \"\" },\n { method: \"get\", action: \"/get-address\" },\n );\n },\n });\n\n const busy = addressFetcher.state !== \"idle\";\n const showSpinner = useSpinDelay(busy, {\n delay: 150,\n minDuration: 500,\n });\n const displayMenu = cb.isOpen && addresses.length > 0;\n\n\n return {\n displayMenu,\n showSpinner,\n selectedAddress,\n cb,\n addressFetcher,\n addresses,\n };\n};\n```\n\n## 8. useDateRanges\n\nPour les applications nécessitant de manipuler des dates, voici un hook permettant de les formatter sous forme de `string`. Elles peuvent ensuite être sauvegardées dans l'URL (sur les sites de réservation par exemple). \n\nNous exploitons dans ce hook la librairie [date-fns](https://date-fns.org) pour formatter la date. \n\n```tsx\nuseDateRanges.tsx\n\nimport {\n parseStringToDate\n} from \"app/shared/dates.ts\";\nimport {\n differenceInDays\n} from \"date-fns\";\nimport React, { useMemo } from \"react\";\nimport { useSearchParams } from \"react-router\";\n\n\nconst getDateDifferenceInDays = ({\n endDate,\n startDate,\n}: {\n endDate: Date;\n startDate: Date;\n}) => {\n // Always add more day, to include the current day\n const dateDifferenceInDays = differenceInDays(endDate, startDate) + 1;\n\n return dateDifferenceInDays;\n};\n\nexport const useDateRanges = ({\n defaultEndDate = null,\n defaultStartDate = null,\n defaultAdditionalDate = null,\n minDate = null,\n}: {\n defaultStartDate?: string | null;\n defaultEndDate?: string | null;\n defaultAdditionalDate?: string | null;\n minDate?: string | null;\n}) => {\n const [searchParams] = useSearchParams();\n\n const startDateParam = searchParams.get(\"startDate\");\n const endDateParam = searchParams.get(\"endDate\");\n\n const minimumDate = new Date(minDate) || new Date()\n\n const [selectedDates, setSelectedDates] = React.useState<{\n startDate: string;\n endDate: string;\n additionalDate?: string;\n }>(() => {\n return {\n startDate: defaultStartDate ?? startDateParam ?? \"\",\n endDate: defaultEndDate ?? endDateParam ?? \"\",\n additionalDate: defaultAdditionalDate ?? \"\",\n };\n });\n\n const isOutated = React.useMemo(() => {\n if (!selectedDates.startDate) return false;\n const startDate = parseStringToDate(selectedDates.startDate);\n\n return startDate < minimumDate;\n }, [selectedDates?.startDate, minimumDate]);\n\n const dateDifferenceInDays = useMemo(() => {\n if (!selectedDates.startDate || !selectedDates.endDate) return 0;\n return getDateDifferenceInDays({\n endDate: parseStringToDate(selectedDates.endDate),\n startDate: parseStringToDate(selectedDates.startDate),\n });\n }, [selectedDates.endDate, selectedDates.startDate]);\n\n return {\n selectedDates,\n setSelectedDates,\n minimumDate,\n isOutated,\n dateDifferenceInDays,\n };\n};\n```\n\n## 9. useLocalStorage\n\nCe hook est très pratique pour sauvegarder des informations dans le [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n\n> Le `localStorage` est une base de donnée présente directement dans le navigateur, qui permet par exemple de sauvegarder les informations de l'utilisateur comme son thème, s'il a accepté les cookies, ou toute information utile pour améliorer l'expérience utilisateur.\n\nCette version du hook nécessite de télécharger la librairie [usehooks-ts](https://usehooks-ts.com/). Il existe également des alternatives natives à React.\n\n```sh\nTerminal\nnpm install usehooks-ts\n```\n\n```tsx\nuseLocalStorage.tsx\nimport {\n useCallback,\n useEffect,\n useState,\n type Dispatch,\n type SetStateAction,\n} from \"react\";\n\nimport { useEventCallback, useEventListener } from \"usehooks-ts\";\n\ndeclare global {\n interface WindowEventMap {\n \"local-storage\": CustomEvent;\n }\n}\n\ntype SetValue = Dispatch>;\n\nexport function useLocalStorage(\n key: string,\n initialValue: T,\n): [T, SetValue] {\n // Get from local storage then\n // parse stored json or return initialValue\n const readValue = useCallback((): T => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n return initialValue;\n }\n\n try {\n const item = window.localStorage.getItem(key);\n return item ? (parseJSON(item) as T) : initialValue;\n } catch (error) {\n console.warn(`Error reading localStorage key “${key}”:`, error);\n return initialValue;\n }\n }, [initialValue, key]);\n\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState(readValue);\n\n // Return a wrapped version of useState's setter function that ...\n // ... persists the new value to localStorage.\n const setValue: SetValue = useEventCallback((value) => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n console.warn(\n `Tried setting localStorage key “${key}” even though environment is not a client`,\n );\n }\n\n try {\n // Allow value to be a function so we have the same API as useState\n const newValue = value instanceof Function ? value(storedValue) : value;\n\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(newValue));\n\n // Save state\n setStoredValue(newValue);\n\n // We dispatch a custom event so every useLocalStorage hook are notified\n window.dispatchEvent(new Event(\"local-storage\"));\n } catch (error) {\n console.warn(`Error setting localStorage key “${key}”:`, error);\n }\n });\n\n useEffect(() => {\n setStoredValue(readValue());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleStorageChange = useCallback(\n (event: StorageEvent | CustomEvent) => {\n if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {\n return;\n }\n setStoredValue(readValue());\n },\n [key, readValue],\n );\n\n // this only works for other documents, not the current one\n useEventListener(\"storage\", handleStorageChange);\n\n // this is a custom event, triggered in writeValueToLocalStorage\n // See: useLocalStorage()\n useEventListener(\"local-storage\", handleStorageChange);\n\n return [storedValue, setValue];\n}\n\n// A wrapper for \"JSON.parse()\"\" to support \"undefined\" value\nfunction parseJSON(value: string | null): T | undefined {\n try {\n // @ts-ignore\n return value === \"undefined\" ? undefined : JSON.parse(value ?? \"\");\n } catch {\n return undefined;\n }\n}\n```\n\n## 10. useQueryState\n\nCe hook s'utilise comme [useState](https://react.dev/reference/react/useState), mais va sauvegarder les valeurs comme [paramètres d'URL](https://fr.wikipedia.org/wiki/Cha%C3%AEne_de_requ%C3%AAte).\n\n![Exemple de paramètres d'URL](https://algomax-public.s3.eu-west-3.amazonaws.com/what_are_url_parameters_1cd183d8b2.png)\n\nDans quel cas vas-tu utiliser les `paramètres d'URL` ?\n\n- pour sauvegarder les filtres sur une application de réservation comme [leboncoin](https://www.leboncoin.fr) ou [Airbnb](https://www.airbnb.com).\n- pour la pagination d'un blog (numéro de page sélectionné, limite d'articles affichés).\n- pour sauvegarder la valeur d'une barre de recherche (comme sur [Google](https://www.google.com) par exemple)\n\nPour ce faire, je te présente la librairie [nuqs](https://nuqs.47ng.com), qui vient exploiter les hooks natifs à Remix (comme [useSearchParams](https://api.reactrouter.com/v7/functions/react_router.useSearchParams.html))\n\nL'exemple le plus simple se trouve sur la documentation de [nuqs](https://nuqs.47ng.com/docs/basic-usage)\n\n```tsx\nDemo.tsx\n\nimport { useQueryState } from 'nuqs'\n \nexport function Demo() {\n const [name, setName] = useQueryState('name')\n return (\n <>\n setName(e.target.value)} />\n \n

Hello, {name || 'anonymous visitor'}!

\n \n )\n}\n```\n\nL'avantage de ce hook est sa simplicité d'utilisation. L'auteur de la librairie, [François Best](https://x.com/fortysevenfx) nous propose une **expérience développeur** d'exception. \n\nSes nombreux `parsers` permettent de valider tout type de donnée (full typesafe) :\n\n- `parseAsString` (les paramètres sont des *string* par défaut)\n- `parseAsInteger` pour les entiers\n- `parseAsFloat` pour les chiffres à 2 décimales\n- `parseAsBoolean` pour les booléens\n- `parseAsStringLiteral` pour les *string literals*\n- et bien plus (les dates, les valeurs hexadécimales, les *enums* ...)\n\nLe hook **useQueryState** prend comme premier argument le nom du `paramètre d'URL`. Le deuxième argument est optionel, et peut soit être le `parser`, soit un objet de configuration :\n\n```tsx\nuseQueryState.tsx\nimport { useQueryState, parseAsInteger } from 'nuqs'\n\nconst [search] = useQueryState('search', { defaultValue: '' })\n// ^? string\n \nconst [count] = useQueryState('count', parseAsInteger)\n// ^? number | null -> no default value = nullable\n \nconst [count2] = useQueryState('count', parseAsInteger.withDefault(0))\n// ^? number\n```\n\n> J'ai de nombreux paramètres d'URL différents à gérer, comment faire ?\n\nUtilise le hook [useQueryStates](https://nuqs.47ng.com/docs/batching) (au pluriel), pour gérer un objet de plusieurs `paramètres d'URL`.\n\n```tsx\nimport { useQueryStates, parseAsFloat } from 'nuqs'\n\nconst [{ latitude, longitude }, setCoordinates] = useQueryStates(\n {\n // Use variable names that make sense in your codebase\n latitude: parseAsFloat.withDefault(45.18),\n longitude: parseAsFloat.withDefault(5.72)\n },\n {\n urlKeys: {\n // And remap them to shorter keys in the URL\n latitude: 'lat',\n longitude: 'lng'\n }\n }\n)\n \n// No changes in the setter API, but the keys are remapped to:\n// ?lat=45.18&lng=5.72\nsetCoordinates({\n latitude: 45.18,\n longitude: 5.72\n})\n```\n\nJ'espère que ces hooks vous seront utiles !","youtubeVideo","categories",[39,42,45],{"_24":40,"_26":41},"cma0ygyr10000yk674psikbwx","Remix",{"_24":43,"_26":44},"cma0ygyss0001yk67s6tvyf8q","ReactJS",{"_24":46,"_26":47},"cma0ygytr0002yk67fi9yxtr2","React Router 7","author",{"_24":50,"_51":52},"cma0ygz2m000ayk67bs6pgohz","name","Virgile","_count",{"_55":56},"views",3,"readTime",{"_59":60,"_61":62,"_63":64,"_65":66},"text","14 min read","minutes",13.04,"time",782400,"words",2608,"featuredImage",{"_69":70,"_71":72,"_73":74,"_75":76},"url","https://algomax-public.s3.eu-west-3.amazonaws.com/402f9750-3c16-4925-bd5c-10fe46e2ace9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250509%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250509T205559Z&X-Amz-Expires=3600&X-Amz-Signature=3ab62c3a1e10403bf4f8aac32d8a25006f45fbd5da912d16b118e9fdcb0d329d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","alt","React Router 7 ","width",1280,"height",720,{"_22":23,"_24":78,"_26":79,"_28":80,"_30":81,"_32":82,"_34":83,"_36":-5,"_37":84,"_48":86,"_53":87,"_57":89,"_55":88,"_67":94},"cma0ygzcv000fyk67izw2pxw3","Comment créer une API avec plusieurs actions dans Remix ?","comment-creer-une-api-avec-plusieurs-actions-dans-remix","Améliore ton code en utilisant le concept Discriminated Union Type dans ton application Remix, avec Zod et Conform !",["D",1719532800000],"Il y a quelques semaines, j'ai découvert un nouveau concept Typescript en lisant un article intéressant sur les [Discriminated Union Types](https://www.hexa-web.fr/blog/discriminated-union-type-typescript) (merci encore [Dimitri](https://www.linkedin.com/in/dimitri-dumont/) 😉).\n\nIl m'a permis d'améliorer le code de mes applications **Remix**. Notamment sur la partie **serveur**, avec les **actions**.\n\n## Pourquoi utiliser le Discriminated Union Type ?\n\nJe l'utilise parce qu'il me permet d'écrire une logique une seule fois. Au lieu de devoir écrire plusieurs fois la même logique de validation, pour des actions mineures comme la **suppression**, l'**édition** et la **création** d'une donnée, toute cette logique se retrouve dans le même fichier (et non pas dans 3-4 fichiers différents).\n\n\n\n## Comment créer une route API\n\nPour mieux comprendre le [routing dans Remix](/blog/les-6-routes-a-connaitre-avec-le-framework-remix-framework-react), je vous conseille l'article sur [les 6 types de routes à connaître dans Remix](/blog/les-6-routes-a-connaitre-avec-le-framework-remix-framework-react).\n\nIl nous suffit de créer un fichier dans le dossier `app/routes`, que nous allons nommer et qui prendra l'extension `tsx`. Prenons par exemple une route que nous allons appeler `actions`, qui sera accessible à l'URL `http://localhost:3000/actions`.\n\nEnsuite, nous avons besoin d'exporter une *méthode* nommée *action* (qui contient la logique **serveur**) :\n\n```tsx app/routes/actions.tsx\nexport const action = async ({ request }: ActionFunctionArgs) => {\n return null;\n```\n\nLa fonction **action** sera exécutée à chaque requête API de type *POST*, *PUT*, *DELETE* ... Toutes les [méthodes HTTP](https://developer.mozilla.org/fr/docs/Web/HTTP/Methods) sauf le *GET*.\n\nMaintenant, nous allons rajouter un peu de logique, avec plusieurs actions possibles.\n\n## Comment déterminer l'action à exécuter ?\n\nDans cet exemple, nous souhaitons appeler cette *route* pour **ajouter** ou **supprimer** un utilisateur. Nous avons donc 2 **mutations** (ou actions) différentes dans la même *méthode* *action*.\n\nPour faire simple, nous allons soumettre une valeur dans le formulaire qui va changer en fonction de l'action à effectuer. Nous allons ensuite utiliser un **switch** pour déterminer laquelle des deux actions doit être exécutée.\n\n> C'est la valeur de la variable *intent* qui détermine quelle logique exécuter.\n\n```tsx app/routes/actions.tsx\nconst createUser = async () => {\n}\nconst deleteUser = async () => {\n}\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n const intent : 'create' | 'delete' = 'create';\n switch (intent) {\n case 'create': {\n return await createUser()\n }\n case 'delete': {\n return await deleteUser()\n }\n }\n};\n```\nCependant, c'est le composant React côté client qui va déterminer la valeur de la constante nommée **intent**. (Nous allons supprimer la déclaration de la variable *intent* dans la méthode *action*).\n\nAjoutons la logique côté client, en exportant par défaut un composant React (je te conseille [cet article dans lequel on implémente un formulaire full typesafe avec Remix](/blog/videos/formulaires-surpuissants-avec-remix-zod-et-conform) :\n\n```tsx app/routes/actions.tsx\nimport type { ActionFunctionArgs } from \"@remix-run/node\";\nimport { Form, json } from \"@remix-run/react\";\n\nconst createUser = async () => { };\nconst deleteUser = async () => { };\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n const formData = await request.formData();\n \n const intent = formData.get('intent') as 'create' | 'delete';\n switch (intent) {\n case \"create\": {\n return await createUser();\n }\n case \"delete\": {\n return await deleteUser();\n }\n }\n};\n\nexport default function User() {\n return (\n \n );\n}\n```\n\n> Mais je comprend pas, il est où ton Discriminated Union Type ?\n\nEffectivement, nous y venons. Nous avons codé toute la logique serveur et client pour nous permettre d'effectuer deux mutations au sein du même composant : **créer** et **supprimer** un utilisateur.\n\nMais nous n'utilisons pas encore de Discriminated Union Type. On pourrait définir des types avec **Typescript** directement dans notre action, mais ça ne serait pas vraiment typesafe. Pour être sûr d'avoir des données typées, nous avons besoin d'utiliser la librairie **Zod** pour valider les données de formulaire. Je vous recommende également la librairie **Conform** pour améliorer l'expérience de vos utilisateurs.\n\nPour [maîtriser](https://youtu.be/_-ZOGj80TMw) deux ces librairies avec Remix, [regardez cette vidéo](https://youtu.be/_-ZOGj80TMw)\n\n\n\n## Utiliser le Discriminated Union Type avec Zod et Conform\n\nNous avons besoin d'installer trois librairies pour avoir des données typées (grâce à Zod), discriminer la mutation (grâce à Typescript) et améliorer l'UX du formulaire (grâce à Conform).\n\n```sh Terminal\nnpm install zod @conform-to/zod @conform-to/react\n```\n\nEnsuite, nous devons définir deux schémas Zod :\n\n- Un schéma pour créer l'utilisateur (*CreateAction*)\n- Un schéma pour supprimer l'utilisateur (*DeleteAction*)\n\nChacun de ces schémas possède une *clé* en commun : la propriété **intent**, qui nous permettra de discriminer le schéma (savoir lequel des deux représente la donnée soumise par le formulaire)\n\nLe code ressemble maintenant à ça : \n\n```tsx app/routes/actions.tsx\nimport { parseWithZod } from \"@conform-to/zod\";\nimport type { ActionFunctionArgs } from \"@remix-run/node\";\nimport { Form, json } from \"@remix-run/react\";\nimport { z } from \"zod\";\n\nconst createUser = async () => { };\nconst deleteUser = async () => { };\n\nconst DeleteAction = z.object({\n userId: z.string({\n required_error: \"User ID is required\",\n }),\n intent: z.literal(\"delete\"),\n});\n\nconst CreateAction = z.object({\n firstname: z.string({ required_error: \"Firstname is required\" }),\n intent: z.literal(\"create\"),\n});\n\nconst Actions = z.union([DeleteAction, CreateAction]);\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n const formData = await request.formData();\n const submission = parseWithZod(formData, {\n schema: Actions,\n });\n\n if (submission.status !== \"success\") {\n return json({ result: submission.reply() });\n }\n const { intent } = submission.value;\n switch (intent) {\n case \"create\": {\n return await createUser();\n }\n case \"delete\": {\n return await deleteUser();\n }\n }\n};\n\nexport default function User() {\n return (\n \n );\n}\n```\n\nCe qu'il faut regarder, c'est la déclaration du schéma **Actions** :\n\n`const Actions = z.union([DeleteAction, CreateAction]);`\n\nNous utilisons **z.union**, pour définir nos deux actions différentes en informant Zod qu'elles pourront être discriminées par la propriété *intent*.\n\nMaintenant, si l'utilisateur soumet le formulaire avec l'intention de créer un utilisateur, Zod va valider les propriétés *firstname*, *lastname* et *intent=\"create\"*.\n\nSi l'utilisateur a l'intention de supprimer l'utilisateur, Zod va valider la propriété *intent=\"delete\"*, et ne va pas causer d'erreur si les propriétés *firstname* et *lastname* sont absentes.\n\nQu'en as-tu pensé ? N'hésite pas à donner ton avis sur [LinkedIn](/linkedin) ou la [chaîne YouTube](/youtube).",[85],{"_24":40,"_26":41},{"_24":50,"_51":52},{"_55":88},717,{"_59":90,"_61":91,"_63":92,"_65":93},"6 min read",5.275,316500,1055,{"_69":95,"_71":96,"_73":74,"_75":76},"https://algomax-public.s3.eu-west-3.amazonaws.com/c610eae3-de1d-4956-91d4-f8a8091d9d9f.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250509%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250509T205559Z&X-Amz-Expires=3600&X-Amz-Signature=fdd7485c3a6b5ab17c98699ef21b384f6d3c55993d83e31de532d1f445e1e24c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","créer une API ",{"_22":23,"_24":98,"_26":99,"_28":100,"_30":101,"_32":102,"_34":103,"_36":-5,"_37":104,"_48":107,"_53":108,"_57":110,"_55":109,"_67":115},"cma0ygzhk000hyk6716tq7dy9","Comment gérer les erreurs avec Remix ? (ErrorBoundary)","comment-gerer-les-erreurs-avec-remix-error-boundary","Avoir des erreurs Javascript ne fait jamais plaisir. Mais il existe le composant ErrorBoundary). Dans ce guide, tu vas découvrir comment afficher un composant d'erreur personnalisé en pour protéger toutes les pages de ton application.",["D",1714608000000],"As-tu déjà eu des erreurs Javascript en production ? **Pire** encore, as-tu reçu l'appel d'un client, qui se plaint d'avoir reçu un message d'erreur ?\nTu perds de la crédibilité.\n\nHeureusement, il existe le composant _ErrorBoundary_ qui permet d'afficher un composant d'erreur, respectant le thème du site et ton Design System.\n\n\n\n## Avant d'utiliser ErrorBoundary\n\nTu retrouves un message d'erreur générique incompréhensible. Difficile de comprendre ce qui a pu se passer, et tu vas prendre du temps à réparer le bug. De plus, ton site est inutilisable en l'état. La navigation de ton utilisateur a été coupée brutalement.\n\n![Erreur générique Javascript](https://algomax-public.s3.eu-west-3.amazonaws.com/3_Ul0_S_e9785a9f36.png)\n\n## Après avoir mis en place ErrorBoundary\n\nTu améliores l'expérience utilisateur. Tu réduis l'impact de l'erreur à l'endroit où elle a été déclenchée. Cela permet au développeur de vite résoudre le problème, car il sait exactement de quel fichier il s'agit.\n\nDans Remix, on utilise le composant [ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary), qui va remplacer le composant ayant déclenché l'erreur.\n\n![Message d'erreur Remix localisé, clair et concis, ne perturbant pas le parcours utilisateur](https://algomax-public.s3.eu-west-3.amazonaws.com/error_boundary_cdcf793439.png)\n\nTu retrouves cet exemple et davantage d'information dans la documentation de Remix concernant [l'error handling](https://remix.run/docs/en/main/guides/errors)\n\nPour améliorer l'expérience utilisateur (UX), il est recommandé d'offrir une explication claire dans le message d'erreur, comme expliqué dans la figure ci-dessous ([Source](https://www.linkedin.com/pulse/designing-better-error-messages-ux-vitaly-friedman/)).\n\n![Erreur Javascript personnalisée, rassurant le client et expliquant ce qui s'est passé](https://algomax-public.s3.eu-west-3.amazonaws.com/1692716312806_e0b0f10037.png)\n\nUn message d'erreur idéal :\n\n- **rassure** le client\n- **explique** la raison du problème\n- **offre** une marche à suivre pour arranger les choses (contacter le support)\n\n## Qu'est-ce que le composant ErrorBoundary ?\n\nC'est une _librairie_ Javascript, disponible sur _NPM_ sous le nom de [react-error-boundary](https://www.npmjs.com/package/react-error-boundary). Elle est téléchargée plus de 3,7 millions de fois par semaine.\n\nPour l'utiliser dans une application React standard, il suffit de la télécharger dans ton projet :\n\n```bash Terminal\nnpm install react-error-boundary\n```\n\nEnsuite, tu l'utilises dans un composant React. Elle va _englober_ le composant qui risque de déclencher une erreur, et afficher un composant _fallback_ à la place.\n\n```tsx example.tsx\nimport { ErrorBoundary } from 'react-error-boundary';\n\nSomething went wrong}>\n\t\n;\n```\n\nCet exemple montre deux composants :\n\n- Le composant parent _ErrorBoundary_, qui prend un _children_ (le composant enfant) et une propriété _fallback_ (affichant le composant d'erreur)\n- Le composant enfant _ExampleApplication_. En cas d'erreur de ce dernier, l'erreur ne va pas remonter à la racine de l'application. À la place, l'erreur va afficher le composant _fallback_.\n\nIl y a une deuxième manière d'utiliser ce composant, offrant plus de contrôle et une meilleure UX.\n\n```tsx example.tsx\nimport { ErrorBoundary } from 'react-error-boundary';\n\nfunction fallbackRender({ error, resetErrorBoundary }) {\n\t// Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n\treturn (\n\t\t

\n\t\t\t

Something went wrong:

\n\t\t\t

{error.message}

\n\t\t

\n\t);\n}\n\n {\n\t\t// Reset the state of your app so the error doesn't happen again\n\t}}\n>\n\t\n;\n```\n\nLa propriété _fallbackRender_ accepte une fonction fléchée, nous permettant de récupérer deux arguments :\n\n- Les informations sur l'erreur qui a été déclenchée\n- Une fonction permettant de ré-effectuer un rendu du composant. Déclencher cette fonction permet d'annuler l'erreur, et d'afficher le composant enfant.\n\nGénéralement, on laisse l'utilisateur appeler cette méthode `resetErrorBoundary`. Plus haut, par exemple en utilisant le bouton _Try Again_.\n\nMais cet article ne se concentre pas sur ce composant très utile.\n\nSi tu utilises [Remix](https://remix.run), tu n'as même pas besoin de l'utiliser.\n\nIl est intégré directement dans la librairie !\n\n## Comment gérer tes erreurs avec Remix\n\nPour déclencher une erreur dans ton application Remix, il te suffit d'ajouter l'instruction `throw new Error('bam')` sur n'importe quelle route active.\n\nCe qui affiche ceci :\n\n![Une erreur dans une application Remix](https://algomax-public.s3.eu-west-3.amazonaws.com/image_19_c7ce872c07.png)\n\nCette erreur n'est pas claire du tout. Et elle rend ton application inutilisable pour les clients : Ils ne peuvent pas accéder à une autre page depuis l'interface.\n\nDe plus, cela ne t'aide pas à connaître la raison de l'erreur : elle pourrait être déclenchée par n'importe quoi.\n\nComment faire ? Il suffit d' **exporter un composant nommé ErrorBoundary** dans ton application Remix. Commence par l'importer dans le fichier `root.tsx`, se situant dans le dossier `app/routes` de ton projet Remix.\n\n## Le composant ErrorBoundary (Remix)\n\nLe composant _ErrorBoundary_ est une convention de Remix (au même titre que les méthodes _loader_ et _action_). Exporter un composant nommé \"ErrorBoundary\" dans n'importe quelle route indique à Remix qu'en cas d'erreur, il doit afficher son contenu, et ne pas propager l'erreur plus haut.\n\nPrenons par exemple l'export ci-dessous :\n\n```tsx app/routes/root.tsx\nexport function ErrorBoundary() {\n const error = useRouteError();\n let errorMessage = 'Une erreur inattendue est survenue';\n\n if (error instanceof Error) {\n errorMessage = error.message;\n }\n\n return

{errorMessage};\n}\n```\n\nAprès avoir ajouté ces quelques lignes, notre application ressemble à ça :\n\n![Notre application Remix affiche le message d'erreur \"bam\"](https://algomax-public.s3.eu-west-3.amazonaws.com/image_20_66ae48cf4e.png)\n\nOn avait rajouté la ligne `throw new Error('bam');`. Au lieu d'afficher l'erreur en rouge, sans design, notre composant _ErrorBoundary_ est affiché.\n\nCela nous apporte quelques bénéfices :\n\n- L'erreur ne se propage pas au dessus (on y revient un peu plus bas)\n- On peut designer notre message d'erreur, expliquer au client ce qui s'est passé, et lui indiquer la marche à suivre\n- En bonus, on peut sauvegarder cette erreur avec un outil comme _Sentry_, ou l'envoyer par email pour être prévenu si jamais elle est déclenchée en production.\n\n## Les erreurs ne remontent pas\n\n[React](https://react.dev) utilise un système de composants, avec des balises imbriquées. Ce qui donne une hiérarchie avec des \"parents\" et des \"enfants\".\n\nAvec **Remix**, il est possible d'implémenter des _routes imbriquées_. Cela signifie qu'il est possible d'avoir plusieurs routes _actives_ en même temps.\n\nC'est ce que nous montre l'image, que nous avions vu au dessus :\n\n![Message d'erreur Remix localisé, clair et concis, ne perturbant pas le parcours utilisateur](https://algomax-public.s3.eu-west-3.amazonaws.com/error_boundary_cdcf793439.png)\n\nCette image représente une route imbriquée. Quatres routes sont actuellement actives :\n\n- La route _root_ principale. C'est notre composant d'entrée, cette route est rendue sur toutes les routes. La route _root_ affiche la barre latérale, sur le côté gauche.\n- La route _sales_ (on la voit comme premier segment dans l'URL) affiche le titre de la page **\"Sales\"**, ainsi qu'une barre de navigation horizontale.\n- La route _invoices_ (on retrouve son segment dans l'URL) est \"enfant\" de la route Sales, et affiche les statistiques globales, la barre jaune et verte ainsi que le tableau de factures\n- La route dynamique _102000_ (où **102000** représente une _id_ de facture) est imbriquée dans _invoices_ (encore une fois, on le constate grâce au segment d'URL final). C'est le dernier enfant de cette hiérarchie, l'enfant le plus bas. Et il est en erreur.\n\nOn peut symboliser cette vue d'une autre manière :\n\n```tsx\nexport default function Page () {\nreturn (\n \n \n )\n}\n```\n\nChaque imbrication représente un enfant dans notre composant. Et le composant **ErrorBoundary** empêche notre erreur de remonter plus haut.\n\nCe qui est représenté par l'image ci-dessus, au final, est un message d'erreur qui a empêché une erreur déclenchée dans le composant `Invoice` de remonter plus haut.\n\nC'est un peu comme s'il s'était passé la chose suivante :\n\n```tsx\nexport default function Page() {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t}>\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n```\n\nRemix a remplacé le composant `Invoice` par un composant `Error`, car ce fichier était protégé par une fonction ErrorBoundary.\n\nEn ajoutant ce composant sur notre route imbriquée, nous améliorons considérablement l'expérience de nos utilisateurs. De plus, nos développeurs identifient plus rapidement le problème, car le composant en erreur est au plus bas dans la hiérarchie.\n",[105,106],{"_24":40,"_26":41},{"_24":43,"_26":44},{"_24":50,"_51":52},{"_55":109},708,{"_59":111,"_61":112,"_63":113,"_65":114},"7 min read",6.335,380100,1267,{"_69":116,"_71":117,"_73":118,"_75":119},"https://algomax-public.s3.eu-west-3.amazonaws.com/b48edc68-d889-41c9-b36f-1f600141932c.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250509%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250509T205559Z&X-Amz-Expires=3600&X-Amz-Signature=2894d3b680fec4d9f9af64e76e7490c66c552bb2c102c53285e7018a5f548efe&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Comment gérer les erreurs avec React Router 7",1920,1080,"pagination",{"_122":123,"_124":56,"_125":126,"_127":128},"page",1,"pageSize","pageCount",10,"total",30,[130,135,142,149,156,163,169,174,179,186],{"_24":131,"_26":132,"_28":133,"_134":-5},"cma0ygyvx0004yk67z5ezcv8p","Application mobile ","application-mobile-","image",{"_24":136,"_26":137,"_28":138,"_134":139},"cma0ygyz00007yk677i1tjff2","NodeJS","nodejs",{"_24":140,"_69":141,"_71":137},"cma239buz0006ykoznafwzvow","https://algomax-public.s3.amazonaws.com/67e309ee-8db1-4816-b4ab-f9962c33d4f1.png",{"_24":143,"_26":144,"_28":145,"_134":146},"cma0ygz000008yk67urmvvgxl","Docker","docker",{"_24":147,"_69":148,"_71":145},"cma238g0g0002ykozkuyvfu7r","https://algomax-public.s3.amazonaws.com/40436d76-e4c0-43a1-9683-019adf5e9014.png",{"_24":150,"_26":151,"_28":152,"_134":153},"cma0ygywx0005yk67arcm0kw4","Figma","figma",{"_24":154,"_69":155,"_71":151},"cma24o2wh0007ykozlzifidx0","https://algomax-public.s3.amazonaws.com/7019f576-4bb9-4167-b567-c09745898615.png",{"_24":157,"_26":158,"_28":159,"_134":160},"cma0ygyuu0003yk679pggj8v0","NestJS","nestjs",{"_24":161,"_69":162,"_71":158},"cma24pvg10008ykozfti5xo0h","https://algomax-public.s3.amazonaws.com/eae71424-33db-4162-8f02-d08a2e20a622.png",{"_24":46,"_26":47,"_28":164,"_134":165},"react-router-7",{"_24":166,"_69":167,"_71":168},"cma24rd2e0009ykozhi6zylip","https://algomax-public.s3.amazonaws.com/512552ae-927c-4a83-9513-d850ff83e574.png","React Router 7 logo",{"_24":43,"_26":44,"_28":170,"_134":171},"reactjs",{"_24":172,"_69":173,"_71":44},"cma24srkf000aykozg11d0dk2","https://algomax-public.s3.amazonaws.com/f10999d5-e739-4bc3-afb4-8211ec7b9f49.webp",{"_24":40,"_26":41,"_28":175,"_134":176},"remix",{"_24":177,"_69":178,"_71":41},"cma24tcao000bykoz44554mdv","https://algomax-public.s3.amazonaws.com/e317a065-d836-4232-8ae5-7de6a9ff5277.png",{"_24":180,"_26":181,"_28":182,"_134":183},"cma0ygyxz0006yk67t7rx9ota","Strapi","strapi",{"_24":184,"_69":185,"_71":182},"cma2394060005ykozjkxqqoh2","https://algomax-public.s3.amazonaws.com/74c12025-c0f3-4778-83cf-5b69765baaa1.png",{"_24":187,"_26":188,"_28":189,"_134":190},"cma0ygz0z0009yk67nztcrh2s","Terminal","terminal",{"_24":191,"_69":192,"_71":193},"cma238oi20003ykoz7fpuawz5","https://algomax-public.s3.amazonaws.com/2d6946a5-e89f-4536-a021-ab7cfda0cc36.png","Terminal (iterm)","courseBackLinks",[196,200,202,206,209],{"_26":197,"_28":198,"_199":-5},"Développe une application de mise en relation avec Remix.js, NestJS, Typescript, Turborepo","developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo","landingPageUrl",{"_26":47,"_28":164,"_199":201},"/formation-react-router-7",{"_26":203,"_28":204,"_199":205},"Crée ta première app Next.js 15 full-stack avec Prisma et RSC","developper-une-app-next-js-15-full-stack-avec-prisma-et-rsc","/creer-ta-premiere-app-nextjs-15",{"_26":207,"_28":208,"_199":-5},"Créer un site e-commerce moderne avec Remix et Strapi 5","creer-un-site-e-commerce-moderne-avec-remix-et-strapi-5",{"_26":210,"_28":211,"_199":-5},"Développe une app de chat temps réel avec Remix et NestJS","developpe-une-app-de-chat-temps-reel-avec-remix-et-nestjs","env",{"_214":215,"_216":217,"_218":219,"_220":221,"_222":223},"GOOGLE_CAPTCHA_SITE_KEY","6Lfia0UkAAAAACBikkfHI1VNoRkyUK99pofGRHvD","ALGOMAX_ENV","production","FRONTEND_URL","https://algomax.fr","GTM_ID","GTM-5QP7LX7","GA_ID","G-N1C6D1CR5Z","user","requestInfo",{"_227":228,"_233":234,"_235":236},"hints",{"_229":230,"_231":232},"theme","light","timeZone","UTC","path","/signin","userPrefs",{"_229":-5},"routes/_marketing+/_publicLayout",{"_26":47,"_28":164,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"price",258.7,"originalPrice",398,"totalSavingsInEuros",139.3,"totalSavingsInPercentage",35,"endSaleDate",["D",1746835200000],"promoCode","LAUNCH35","pagesRemainingAtCurrentPrice",96,"routes/_marketing+/_auth+/signin",{"_255":-7,"_256":257},"lastUsedProvider","activePage","password","actionData","errors"]

Se connecter