Adjust your app for Web Spotlight

import { createDeliveryClient } from "@kontent-ai/delivery-sdk";

export const deliveryClient = createDeliveryClient({
    environmentId: process.env.KONTENT_AI_ENVIRONMENT_ID || '',
    previewApiKey: process.env.KONTENT_AI_PREVIEW_API_KEY,
    defaultQueryConfig: {
        usePreviewMode: true
    }
})

// This example uses generated models. See https://kontent.ai/learn/strongly-typed-models
const [landingPage, setLandingPage] = useState<LandingPage | null>(null);

// Retrieves the Website root item and saves the linked Landing page
useEffect(() => {
  deliveryClient.item<WebSpotlightRoot>('website_root')
    .toPromise()
    .then(
      response => (
        // Website root uses the 'Content' element to link the Landing page
        setLandingPage(response.data.item.elements.content.linkedItems[0])
      )
    )
}, [])

<img
  src={landingPage.elements.image.value[0]?.url}
  // If the asset doesn't have an alt text description, use its file name
  alt={landingPage.elements.image.value[0]?.description ||
    landingPage.elements.image.value[0]?.name}
  height={landingPage.elements.image.value[0]?.height || 200}
  width={landingPage.elements.image.value[0]?.width || 300} />
<h1>{landingPage.elements.title.value}</h1>
<div dangerouslySetInnerHTML={{ __html: landingPage.elements.body.value }}></div>

import KontentSmartLink from '@kontent-ai/smart-link';

const kontentSmartLink = KontentSmartLink.initialize({
  defaultDataAttributes: {
    projectId: process.env.KONTENT_AI_ENVIRONMENT_ID,
    languageCodename: "default"
  },
  queryParam: "preview"
});

// Specify content item ID
<div className="App-header" data-kontent-item-id={landingPage.system.id}>
  <img
    // Specify element codename using a strongly typed model
    data-kontent-element-codename={contentTypes.landing_page.elements.image.codename}
    className="App-logo"
    src={landingPage.elements.image.value[0]?.url}
    // If asset doesn't have alt text description, use its file name
    alt={landingPage.elements.image.value[0]?.description ||
      landingPage.elements.image.value[0]?.name}
    height={landingPage.elements.image.value[0]?.height || 200}
    width={landingPage.elements.image.value[0]?.width || 300} 
  />
  <h1
    data-kontent-element-codename={contentTypes.landing_page.elements.title.codename}>
    {landingPage.elements.title.value}
  </h1>
  <div
    data-kontent-element-codename={contentTypes.landing_page.elements.body.codename}
    dangerouslySetInnerHTML={{ __html: landingPage.elements.body.value }}>
  </div>
</div>