Créer une application mobile et un site optimiser pour les SEO avec Tailwind CSS, Next.js et Capacitor

Nextjs + Capacitor : quels objectifs ?

Une des stacks les plus populaires pour les web apps est Nextjs de Vercel et Tailwind CSS.

Nextjs est un framework basé sur React permettant de créer des sites web performants. Il est utilisé par des grandes marques comme Netflix et Uber. Il permet en quelques clics d'avoir un site optimisé atteignant 100% sur tous les critères Lightouse. Il permet également d'avoir des sites en Server Side Rendering (SRR) lisibles par les moteurs de recherche et optimisés pour le référencement (SEO).

Tailwind est un framework CSS qui permet de mettre en forme rapidement des applications responsives. Il est lui aussi optimisé pour des sites qui demandent de hautes performances.

L'objectif ici est de porter une web app sous cette stack vers une application native. Nous partons de l'idée de Max Lynch (créateur du framework ionic) d'avoir une application ionic avec nextjs mais nous souhaitons garder la SSR fourni par Nextjs pour que la version web de notre app soit lisible par les moteurs de recherche et optimisée pour le SEO.

Nous avons partagé le code source de ce projet et mis en ligne une version d'exemple. Vous pourrez retrouver en bas de cet article un exemple effectué par l'agence web Alphalives utilisant cette technologie.

En résumé nous avons les objectifs suivants :

• Un seul code source pour une web App et une application native iOS et Androïd (avec peu/pas de personnalisation pour chaque plateforme)

• Un web App en SSR pour optimiser le SEO

• Une web App à 100% sur tous les critères Lighthouse

• Une App native qui semble "vraiment native" avec un menu mobile, un shell (squelette de l'application) qui se charge une seule fois et des animations pour changer de page.

• Respecter les contraintes des progressive web apps

Comparaison avec d’autres technologies

Etape 1 : Mise en place de la stack Nextjs et Capacitor

La première étape est d’installer une base de projet nextjs et d’y ajouter Capacitorjs pour pouvoir compiler ce dernier en application native.

1. Installer nextjs : nous suivons la documentation officielle (https://nextjs.org/)

   

2. Installer capacitorjs : https://capacitorjs.com/docs/getting-started

3. Mise en place pour Androïd : https://capacitorjs.com/docs/android

   

4. Mise en place pour iOS

"plugins": { "SplashScreen": { "launchShowDuration": 0 } }, "ios": { "contentInset": "always" }

Etape 2 : Installation de Tailwind css et mise en place d'un shell pour avoir l'effet d'une application native

Tailwind CSS

Nous installons ensuite Tailwind css afin de rendre notre application responsive et qu’elle est une UX d’application native.

• Installation de tailwind : https://tailwindcss.com/docs/guides/nextjs

npm install -D tailwindcss postcss autoprefixer

Mise en place d’un shell

L’app Shell permet d’avoir des zones communes sur l’application qui ne se rechargent pas à chaque changement de page. L’application est alors plus fluide et le rendu est très proche d’une application native. Nous utilisons des fonctionnalités de Nextjs pour le mettre en place.

• Ajour d'une page 2, utilisation de next/link

• Ajout d'un app shell  : https://nextjs.org/docs/basic-features/layouts

• https://nextjs.org/docs/basic-features/layouts

Ajout d'une animation pour les changements de page

https://www.npmjs.com/package/framer-motion

Ajouter un menu desktop et mobile

Etape 3 : Optimisation de notre web app pour le SEO : Récupération de données d'une API avec SWR / SRR

La 3eme étape consiste à optimiser notre web app pour le référencement (SEO). Des applications comme AirBnb ou le bon coin ont besoin de faire référencer par les moteur de recherche leur fiches produits.

Nous allons pour celà utiliser la solution react swr pour nos appels à une API puis mettre en place le SSR avec Nextjs. Le SSR sera utilisé uniquement pour la web App, l’application native utilisera toujours du client side rendering.

https://swr.vercel.app/ npm install swr

Mise en place du SRR

Nous utilisons la ligne de code suivante pour différencier les app natives qui n'utilisent pas le SSR à la web app qui devra générer son contenu côté serveur. Nous essayons de minimiser le code spécifique entre l’app native et la web app

exportconstgetServerSideProps =    process.env.NEXT_PUBLIC_SKIP_SSR == 1 ? undefined : init

Résultats

1 seul code source pour iOS, Androïd et la Progressive Web App

Le principal objectif est la, avoir un seul et unique code source pour toutes les plateformes : mobile et web. 

Capacitorjs nous permet de réaliser ce point facilement. 98% du code reste complètement identique pour les 3 plateformes.

100% Lighthouse

La performance d'un app est devenu un critère essentiel pour l'acceptation par les utilisateurs ainsi que pour l’optimisation au référencement. Avoir de bonnes performances est donc indispensable pour la web App comme pour l’app native. 

Nous mesurons les critères de performance avec l’outil Lighthouse de Google. Notre prototype obtient 100% pour tous les scores de lighthouse, ce qui est un gage de réussite et valide les choix technologiques choisis.

SEO / Référencement

C'est le gros apport que nous avons amené sur l'application proposée par Max Lynch. Nous proposons une manière de mettre en place du Serveur Side Rendering (SRR) sur nous web app pour être entièrement optimisé pour le SEO et répondre aux contraintes de référencement.