Next Broken Links

Une cli qui détectes les liens invalides dans un site Next.js

4 min de lecture
tldr: https://github.com/Vahor/next-broken-links

Pourquoi?

J’ai migré du contenu Markdown d’un site vers un autre : il y avait quasiment 50 pages différentes.
Et chaque page a bien sûr changé d’URL.

...Donc tous les liens entre ces pages étaient maintenant invalides.

Regarder chaque page, trouver les liens et les mettre à jour à la main allait être fastidieux.
Du coup, je me suis dit qu’automatiser une partie serait pas mal.
Et je suis sûr qu’un outil ne va pas rater de liens.

Aucun outil existant ?

Next.js a une option expérimentale pour ajouter du typage typescript sur les liens de pages Statically Typed Links.
Cependant, ça ne fonctionne que pour les <Link>, donc si votre contenu vient d'un CMS ou de fichiers Markdown, ça ne marche plus.
De plus, ça ne prend en compte que les pages où l'url est pré-définie en utilisant le nom de fichier.
Par exemple hello/page.tsx va ajouter le typage pour /hello mais si on utilise hello/[...slug]/page.tsx, là le typage est perdu et donne /hello/${string}

Comment ça marche?

Pour fonctionner il faut que le projet soit construit avec next build.
Cette cli va simplement extraire les liens de chaque page présent dans le dossier .next (ou out si vous utilisez next export). Puis comparer ça avec les pages qu'il a croisé pour faire cette liste.
Mettre à jour les liens automatiquement n’est pas faisable : la CLI n’a pas l’information de ce qui doit remplacer l’URL incorrecte.
Mais ce qui est déjà suffisant, c’est d’avoir une liste de liens invalides. Puis de faire un sed pour les remplacer.
bun install -D @vahor/next-broken-links
bunx @vahor/next-broken-links --domain vahor.fr

Et voilà c'est fait.

✔ Parsed next config
✔ Extracted links from all pages
✔ Checked links
✖ error Found 44 broken links
    archive/changelog/1.34.0.html: /docs/api/reference/limitations
    archive/changelog/1.36.0.html: /docs/api/howtos-and-examples/analyze/data-dictionary.mdx#download-response
    archive/changelog/1.36.0.html: /docs/api/howtos-and-examples/analyze/data-dictionary.mdx#parameters
    archive/changelog/1.37.0.html: /docs/api/howtos-and-examples/analyze/data-dictionary.mdx#download-response
    archive/changelog/1.37.0.html: /docs/api/howtos-and-examples/documents/batch-translation
    archive/changelog/1.37.0.html: /docs/api/reference/language-support#translation
    [...]

44 liens invalides trouvés instantanément.

Y’a plus qu’à corriger les liens avec un 🪄 find . -name "*.tsx" -exec sed -i 's@broken-link@correct-link@g' {} \; (ou un search-and-replace dans l’IDE)

Faire ce script n’a pas pris beaucoup de temps, et je vais pouvoir le réutiliser pour n’importe quel autre projet. Voire même l’ajouter comme check dans une CI pour m’assurer que les nouvelles pages restent à jour.

Aussi, je ne me limite pas aux liens internes : la CLI regarde aussi le sitemap, ainsi que les liens vers les images ou autres assets.

Pour tester je l'ai ajouté sur vahor.fr et il a trouvé 3 liens invalide dans mon sitemap 😅. Comme quoi cet outil sera utile.