Saltar al contenido principal

Guía de integración Clione + Next.js

Renderiza las señales SEO de Clione (JSON-LD, meta tags, keywords) en un storefront headless de Next.js.

Instalar​

npm install @clione/seo

App Router (Next.js 13+)​

API de Metadata​

// 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', // o '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} />}
      {/* contenido de la página de producto */}
    </>
  )
}

Variables de entorno​

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),
      // ... otros datos de producto
    },
  }
}

export default function ProductPage({ seoHead }) {
  return (
    <>
      <Head>
        <div dangerouslySetInnerHTML={{ __html: seoHead }} />
      </Head>
      {/* contenido de la página de producto */}
    </>
  )
}

Modo metafield (Storefront API de Shopify)​

Si tu tienda Next.js ya consulta la Storefront API de Shopify e incluye metafields:

import { createClioneSeo } from '@clione/seo'

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

// En getServerSideProps o un server component:
const signals = clione.extractSignals(shopifyProduct)
const headHtml = clione.renderHead(signals)

No hace falta llamada API — lee directamente desde los metafields del producto.

Caché​

La API de Clione devuelve Cache-Control: public, max-age=3600, s-maxage=86400. Usa ISR de Next.js o revalidate para cachear:

// App Router
export const revalidate = 3600 // revalida cada hora

// Pages Router
export async function getStaticProps({ params }) {
  // ... ir a buscar señales de Clione
  return { props: { ... }, revalidate: 3600 }
}

Tipos de entidad soportados​

  • 'product' — páginas de producto
  • 'collection' — páginas de colección/categoría
  • 'category' — páginas de categoría (BigCommerce)
  • 'page' — páginas CMS