# Next.js To integrate Preo Widget with Next.js, you'll need to add the Preo JavaScript SDK and configure your application to handle web components properly. ## App Router (Next.js 13+) For Next.js applications using the App Router, create a client component wrapper: 1. Create a new file `app/components/PreoWidget.tsx`: ```typescript 'use client'; import { useEffect } from 'react'; declare global { namespace JSX { interface IntrinsicElements { 'preo-storefront': React.DetailedHTMLProps & { 'sdk-id': string; }, HTMLElement>; } } } export default function PreoWidget({ sdkId }: { sdkId: string }) { useEffect(() => { // Load the Preo SDK script const script = document.createElement('script'); script.src = 'https://edge.preo.cloud/c/components@0.6/components.umd.js'; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []); return ; } ``` 2. Use the component in your pages: ```jsx import PreoWidget from '@/components/PreoWidget'; export default function HomePage() { return (

Welcome to our store

); } ``` ## Pages Router (Legacy) For Next.js applications using the Pages Router: 1. Add the Preo SDK script to your `_document.tsx` or `_document.js`: ```jsx import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return (