Installer dans Next.js

Un package, une route fourre-tout, un token. Vos pages Flocon AI s'affichent ensuite sur votre site web. Il faut l'App Router de Next.js.

1. Installez le package

npm install @flocon-ai/next

2. Ajoutez le token du site web

Copiez votre token du site web depuis /app/tokens. Ajoutez-le à .env.local :

FLOCON_TOKEN=<token du site web>

Définissez la même variable chez votre hébergeur (Vercel, Netlify…). Le package la lit côté serveur uniquement.

3. Ajoutez la route fourre-tout

Créez app/[...slug]/page.tsx. Elle sert toutes les pages Flocon.

import { FloconPage, getFloconMetadata } from "@flocon-ai/next"

export const dynamic = "force-dynamic"

const url = ({ path }: { path: string }) =>
`https://example.com${path}`

type Props = { params: Promise<{ slug: string[] }> }

export async function generateMetadata({ params }: Props) {
const { slug } = await params
return getFloconMetadata({ path: "/" + slug.join("/"), url })
}

export default async function Page({ params }: Props) {
const { slug } = await params
return <FloconPage path={"/" + slug.join("/")} url={url} />
}

• <FloconPage /> affiche la page : titre, blocs et JSON-LD.
• getFloconMetadata() renvoie le titre, la description, les mots-clés, l'URL canonique et les hreflang.
• Une page qui n'existe pas (ou qui est un brouillon) donne une 404.
• Vos propres routes passent avant [...slug]. Next.js les choisit en premier.

La règle url

url reçoit { locale, path } et renvoie l'URL complète d'une page sur votre site web. Flocon AI n'impose aucune règle d'URL. Construisez-la comme le fait votre site web.

L'exemple correspond à la route ci-dessus : pas de langue dans l'URL. Si votre site web met la langue dans l'URL, changez url et vos routes pour qu'elles correspondent.

Elle sert pour l'URL canonique, les hreflang et les liens des « Pages associées ».

Autres langues

Par défaut, la page est lue dans la langue par défaut de votre site web. Pour servir une autre langue, passez-la :

<FloconPage path="/guides/seo" locale="fr" url={url} />

Il n'y a pas de repli vers une autre langue. Une page absente donne une 404.

4. Utilisez le rendu dynamique

export const dynamic = "force-dynamic" fait lire la page par Next.js à chaque requête. Une page que vous publiez apparaît à la visite suivante.

Sans cela, Next.js peut générer la route une seule fois. Une nouvelle page n'apparaîtrait alors pas.

5. Vérifiez

1. Demandez à votre outil d'IA de créer et publier une page à /vs/notion.
2. Ouvrez /vs/notion sur votre site web.

La page est là.

Suite

• Ajouter vos pages au sitemap et à llms.txt
• Ajouter une image OG
• Thème

Mis à jour 31 octobre 2026