Install in Next.js

One package, one catch-all route, one token. Your Flocon AI pages then show on your website. It needs the Next.js App Router.

1. Install the package

npm install @flocon-ai/next

2. Add your website token

Copy your website token from /app/tokens. Add it to .env.local:

.env.local
FLOCON_TOKEN=<website token>

Set the same variable in your host (Vercel, Netlify…). The package reads it on the server only.

Never commit the token. It is read-only, but it is still a secret.

3. Add the catch-all route

Create app/[...slug]/page.tsx. It serves every Flocon page.

app/[...slug]/page.tsx
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 /> renders the page: title, blocks and JSON-LD.
  • getFloconMetadata() returns the title, description, keywords, canonical URL and hreflang.
  • A page that does not exist (or is a draft) gives a 404.
  • Your own routes win over [...slug]. Next.js matches them first.

The url rule

url gets { locale, path } and returns the full URL of a page on your website. Flocon AI imposes no URL rule. Build it the way your website does.

The example matches the route above: no locale in the URL. If your website puts the language in the URL, change url and your routes to match.

It is used for the canonical URL, hreflang, and the links in "Related pages".

Other languages

By default the page is read in the default language of your website. To serve another language, pass it:

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

There is no fallback to another language. A missing page is a 404.

4. Use dynamic rendering

export const dynamic = "force-dynamic" makes Next.js read the page on each request. A page you publish shows up on the next visit.

Without it, Next.js may build the route once. A new page would then not show up.

5. Check it

  1. Ask your AI tool to create and publish a page at /vs/notion.
  2. Open /vs/notion on your website.

The page is there.

Using Lovable or Bolt? If your project is Next.js (App Router), paste these steps into your chat. It knows what to do. Many Lovable and Bolt projects are Vite apps, not Next.js. This package does not work with them.

Next

Updated