← Phase 3 / M16 — Web App Next.js

🌐 Web App Next.js

Application web complète construite avec Next.js 15 App Router — Server Components, Static Generation pour le SEO, partage social riche et expérience desktop/tablet premium alignée avec l'app mobile.

500k+
Pages SEO générées
<1.5s
TTI mobile P95
7
Langues supportées
14
User Stories
User Stories

📋 14 User Stories — M16

US16.1 Must En tant que visiteur non-inscrit, je peux accéder au feed public NOMIIQ sur le web et voir les posts, itinéraires et lieux sans compte.
US16.2 Must En tant que visiteur, je peux voir une fiche lieu détaillée avec photos, score sécurité, posts liés et itinéraires — optimisée SEO (title, description, OG tags).
US16.3 Must En tant qu'utilisateur mobile existant, je peux me connecter sur le web avec les mêmes identifiants (même JWT) sans re-créer de compte.
US16.4 Must En tant qu'utilisateur, je peux partager un post ou itinéraire sur WhatsApp/Twitter/Facebook avec une rich card (image + titre + description).
US16.5 Must En tant qu'utilisateur, je vois ma page profil public sur le web (avatar, bio, stats, derniers posts) avec URL canonique.
US16.6 Must En tant que système, les pages statiques (lieux, itinéraires publics) sont pré-générées (SSG + ISR) pour un chargement < 200ms.
US16.7 Should En tant qu'utilisateur, je peux rechercher un lieu, un post ou un user directement depuis la barre de recherche web (Typesense InstantSearch).
US16.8 Should En tant qu'utilisateur, je vois la carte Mapbox interactive sur le web avec les mêmes pins et filtres qu'en mobile.
US16.9 Should En tant qu'utilisateur, je peux créer un post depuis le web (desktop) avec drag-and-drop de photos.
US16.10 Should En tant qu'utilisateur, je vois un itinéraire IA en timeline interactive sur le web avec carte latérale.
US16.11 Should En tant que système, un sitemap.xml est auto-généré pour toutes les fiches lieux + itinéraires publics (next-sitemap).
US16.12 Could En tant qu'utilisateur, je reçois une notification web (Web Push API) pour les alertes sécurité critiques, même sans avoir l'app mobile.
US16.13 Could En tant que créateur, je peux gérer mes itinéraires premium depuis un dashboard web.
US16.14 Could En tant qu'utilisateur, la langue de l'interface est détectée automatiquement et je peux la changer manuellement (7 langues via next-intl).
Routes & API

🔗 Routes Next.js + Endpoints Backend

📄 Pages Next.js (App Router)

RouteRenduDescription
/SSGLanding page + feed public
/place/[slug]SSG + ISRFiche lieu SEO (revalidate: 3600)
/itinerary/[id]SSG + ISRItinéraire public partagé
/user/[username]SSRProfil public utilisateur
/feedSSR (auth)Feed personnalisé connecté
/exploreSSRExplore + carte
/searchCSRRecherche temps réel
/copilotCSR (auth)Copilote IA web
/[lang]/...SSRRoutes i18n (next-intl)

⚡ API Routes (Next.js)

EndpointMéthodeDescription
/api/og/placeGETOG:image dynamique pour un lieu
/api/og/postGETOG:image dynamique pour un post
/api/og/userGETOG:image dynamique pour un profil
/api/sitemapGETSitemap dynamique (> 500k pages)
/api/robotsGETrobots.txt dynamique par env
/api/revalidatePOSTISR on-demand (webhook Supabase)
/api/web-pushPOSTInscription Web Push notifications
Base de données

🗄️ Nouvelles Tables & Extensions

🌐 Table web_sessions

id UUID PRIMARY KEY
user_id UUID → users
access_token TEXT (encrypted)
refresh_token TEXT (encrypted)
user_agent TEXT
ip_address INET
locale CHAR(5) DEFAULT 'fr-FR'
web_push_subscription JSONB
created_at TIMESTAMPTZ
expires_at TIMESTAMPTZ

🔗 Table og_cache (métadonnées SEO)

id UUID PRIMARY KEY
entity_type ENUM(place,post,user,itinerary)
entity_id UUID
og_title TEXT
og_description TEXT
og_image_url TEXT
canonical_url TEXT
locale CHAR(5)
generated_at TIMESTAMPTZ
invalidated_at TIMESTAMPTZ

📌 Extension : Column seo_slug sur les tables existantes

ALTER TABLE places ADD COLUMN seo_slug TEXT UNIQUE GENERATED ALWAYS AS (lower(regexp_replace(name, '[^a-zA-Z0-9]+', '-', 'g'))) STORED;
ALTER TABLE itineraries ADD COLUMN seo_slug TEXT UNIQUE;
CREATE INDEX idx_places_seo_slug ON places(seo_slug);
CREATE INDEX idx_itineraries_seo_slug ON itineraries(seo_slug);
Architecture

🏗️ Architecture Web App

🌐
Next.js 15
App Router + RSC
⚡
Vercel / CF Pages
Edge Deployment
🔒
Auth partagée
Même JWT que mobile

✅ Stratégies de rendu

SSG (Static)Fiches lieux, landing page — généré au build
ISR (Incremental)Itinéraires publics — revalidation toutes les heures
SSR (Server)Feed personnalisé, profils — rendu serveur à chaque requête
CSR (Client)Recherche, copilote, feed en temps réel

🔧 SEO & Performance

next-sitemapAuto-génère sitemap.xml pour 500k+ pages lieux
Vercel OGImages Open Graph dynamiques par entité
next-intli18n côté serveur — 7 langues sans JS client
next/fontFonts optimisés + zéro CLS (Inter)
next/imageImages WebP + lazy load + blur placeholder
Critères d'acceptation

✅ Définition of Done — M16

🔍
SEO
Score Lighthouse SEO ≥ 95 sur 10 pages lieux. Sitemap.xml accessible. Balises meta + OG complètes.
⚡
Performance
LCP < 2.5s, TTI < 1.5s (mobile 4G). Score Lighthouse Performance ≥ 85.
🔒
Sécurité
CORS configuré. Headers CSP + HSTS. Auth JWT identique au mobile.
🌍
i18n
7 langues opérationnelles (FR, EN, ES, PT, DE, AR, JA). Détection navigateur auto.
📱
Responsive
Mise en page correcte sur mobile 375px, tablet 768px, desktop 1280px.
🔗
Partage
Rich cards fonctionnelles sur WhatsApp, Twitter, LinkedIn, Facebook.
↑