Next.js

Integrate with Next.js (Pages Router & App Router)

Next.js Integration

The Fitting Widget works with both the Pages Router and App Router.

App Router (Recommended)

Use the Next.js Script component with strategy="afterInteractive".

Step 1 — Load Scripts in `layout.tsx` or `page.tsx`

import Script from 'next/script';

export default function ProductLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}

      <Script
        src="https://widget.try-on.ru/fitting-widget-bundle.js"
        strategy="afterInteractive"
        id="fitting-widget-bundle"
      />

      <Script
        strategy="afterInteractive"
        id="fitting-init"
      >
        {`
          window.fitting = window.fitting || function() {
            (window.fitting.q = window.fitting.q || []).push(arguments);
          };
          window.fitting('init', {
            apiKey: '${process.env.NEXT_PUBLIC_TRY_ON_API_KEY}'
          });
        `}
      </Script>
    </>
  );
}

Step 2 — Create the Widget Button

'use client';

interface TryonItem {
  productName: string;
  url: string;
}

declare global {
  interface Window {
    fitting: (command: string, options?: unknown) => void;
  }
}

export function TryOnButton({ items }: { items: TryonItem[] }) {
  const handleClick = () => {
    window.fitting('create', {
      targetElementId: 'widget-container',
      model: 'balanced',
      tryonItems: items,
    });
  };

  return (
    <>
      <div id="widget-container" style={{ width: '100%', maxWidth: 600, aspectRatio: '3/4' }} />
      <button onClick={handleClick}>Try On</button>
    </>
  );
}

Step 3 — Use in a Product Page

import { TryOnButton } from '@/components/TryOnButton';

export default async function ProductPage({ params }: { params: { slug: string } }) {
  const product = await getProduct(params.slug);

  return (
    <div>
      <h1>{product.name}</h1>
      <img src={product.image} alt={product.name} />
      <TryOnButton
        items={[
          {
            productName: product.name,
            url: product.image,
          },
        ]}
      />
    </div>
  );
}

Environment Variable

Add your API key to .env.local:

NEXT_PUBLIC_TRY_ON_API_KEY=pk_live_xxx