Saltar al contenido principal

Clione + Next.js Integration Guide

Render Clione SEO signals (JSON-LD, meta tags, keywords) in a Next.js headless storefront.

Install​

npm install @clione/seo

App Router (Next.js 13+)​

Metadata API​

// app/products/[id]/page.tsx
import { getClioneSeoMetadata, fetchClioneSeo, getJsonLdScriptProps } from '@clione/seo/react'

export async function generateMetadata({ params }: { params: { id: string } }) {
  return getClioneSeoMetadata(params.id, {
    apiUrl: process.env.CLIONE_API_URL,
    apiKey: process.env.CLIONE_API_KEY,
    platform: 'bigcommerce', // or 'shopify'
  })
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const signals = await fetchClioneSeo('product', params.id, {
    apiUrl: process.env.CLIONE_API_URL,
    apiKey: process.env.CLIONE_API_KEY,
  })
  const jsonLdProps = getJsonLdScriptProps(signals)

  return (
    <>
      {jsonLdProps && <script {...jsonLdProps} />}
      {/* product page content */}
    </>
  )
}

Environment Variables​

CLIONE_API_URL=https://your-clione-instance.com
CLIONE_API_KEY=sk-...

Pages Router​

// pages/products/[id].tsx
import Head from 'next/head'
import { createClioneSeo } from '@clione/seo'

export async function getServerSideProps({ params }) {
  const clione = createClioneSeo({
    source: 'api',
    apiUrl: process.env.CLIONE_API_URL,
    apiKey: process.env.CLIONE_API_KEY,
    platform: 'bigcommerce',
  })
  const signals = await clione.getSignals('product', params.id)
  return {
    props: {
      seoHead: clione.renderHead(signals),
      // ... other product data
    },
  }
}

export default function ProductPage({ seoHead }) {
  return (
    <>
      <Head>
        <div dangerouslySetInnerHTML={{ __html: seoHead }} />
      </Head>
      {/* product page content */}
    </>
  )
}

Metafield Mode (Shopify Storefront API)​

If your Next.js store already queries Shopify's Storefront API and includes metafields:

import { createClioneSeo } from '@clione/seo'

const clione = createClioneSeo({ source: 'metafield' })

// In getServerSideProps or server component:
const signals = clione.extractSignals(shopifyProduct)
const headHtml = clione.renderHead(signals)

No API call needed — reads directly from product metafields.

Caching​

The Clione API returns Cache-Control: public, max-age=3600, s-maxage=86400. Use Next.js ISR or revalidate to cache:

// App Router
export const revalidate = 3600 // revalidate every hour

// Pages Router
export async function getStaticProps({ params }) {
  // ... fetch Clione signals
  return { props: { ... }, revalidate: 3600 }
}

Supported Entity Types​

  • 'product' — Product pages
  • 'collection' — Collection/category pages
  • 'category' — Category pages (BigCommerce)
  • 'page' — CMS pages