Pour héberger son site internet static, il existe plusieurs solutions parmi lesquelles Amazon s3, Azure Static Web Apps, Netlify, and Vercel et Cloudflare pages qui nous interesse dans le cadre de cet article.
Pour mon site internet, je me suis servi de ce dernier pour heberger mon contenu web développé avec next.js. Je me sers de l'option SSG (static site generator) pour créer mes pages au format html au moment où je construis le site (yarn export).
Ensuite pour héberger, je voulais me servir d'une autre solution et j'ai testé cloudflare pages. Quelques vidéos tutoriels (en anglais) qui pourrait vous aider à débuter:
Sa configuration n'est pas aisée et je me suis heurté à plusieurs problèmes que j'ai pus solutionner et que je souhaite partager avec vous.
Erreur Yarn 2 ou 3
Cloudflare ne prend pas encore en compte yarn 2 ou yarn 3. Pour ceux qui l'utilise, il suffit d'enlever le fichier de configuration (.yarnrc.yml) au moment d'envoyer les fichiers dans github à l'aide de gitignore.
.gitignore
#yarn files.yarnrc.yml
Type "" is not assignable to type "ReactNode"
L'erreur se présente comme suit:
Type '{}' is not assignable to type 'ReactNode'
Elle apparaît parce que @types/react-dom possède ses propres dépendances et l'une d'elles est @types/react avec une version à '*', la dernière version (18) qui n'est pas encore stable au moment ou j'écris l'article.
FIX pour les utilisateurs yarn
Pour resoudre cette erreur, les utilisateurs de yarn peuvent:
"resolutions": {"@types/react": "17.0.14","@types/react-dom": "17.0.14"},
FIX pour les utilisateurs npm
comme yarn, changer la version des types de réact.
"resolutions": {"@types/react": "17.0.14"},
Et rajouter un script
"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions",
err_ssl_version_or_cipher_mismatch
Cette erreur apparaît souvent lorsqu'on souhaite accéder à la page de production du contenu html fournit par cloudflare pages. Dans mon cas, c'est après plusieurs erreur lors du déploiement de mon site internet que cette erreur est apparue. pour corriger cette erreur, rien de plus simple:
Supprimer son projet et recréer un nouveau projet avec le code qui s'installe sans problème.
SyntaxError: Unexpected token "."
Sur cloudflare, il est possible de changer la version de nodejs. la version par défaut est la 12.18.0. Next.js est stable avec des version plus récente 12.22.0. De plus, react utilise des verions de nodejs encore plus récentes. c'est pourquoi cloudflare donne la possibilité de choisir la version de node js que l'on souhaite installer. il suffit de rajouter la version choisie.
NODE_VERSION=16.16.0
Error: Image Optimization using Next.js
L'erreur complète est la suivante:
Error: Image Optimization using Next.js default loader is not compatible with "next export".
Pour solutionner cette erreur, j'ai modifié le fichier de configuration de Next.js pour lui attribuer une propriété expérimentale et l'empêcher d'utiliser un loader.
next.config.js
module.exports = {experimental: {images: {unoptimized: true,},},}
Conclusion
EN utilisant, une nouvelle plateforme, il est possible de se heurter à plusieurs problème de configuration. Mon objectif en rédigeant cet article est de répertorier celle qui pourrait vous empêcher de reussir à utiliser cette plateforme.
En corrigeant toutes ses erreurs, j'ai pu déployer ma mini-application sur cloudflare. Je ne pense pas la liste soit exhaustive et s'il existe d'autres problèmes, n'hésitez pas à me laisser un commentaire, je me permettrai de mettre à jour l'article.