Integrating fullres with Sanity.io and NextJS

By Todd Garland

Posted in tutorials

Setting up fullres with Sanity.io/NextJS is super easy. Here's how to get your site up and running with fullres in just a few minutes.

1. Install the fullres NPM package in your project:

npm install fullres-nextjs

2. Within your projects `_app.js` or `_app.tsx` file you will need to import `fullres-nextjs`:

import { FullRes } from 'fullres-nextjs'

And then, add the `<FullRes />` component within the App component, and pass the `siteKey` prop with the appropriate value. You can find this value in your fullres account on the settings page. The placement should be above the <Component {...pageProps} /> line to ensure it is included on every page, and look something like this:

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Layout>
      	<FullRes siteKey="[YOUR_SITE_KEY_HERE]" />
      	<Component {...pageProps} />
      </Layout>
    </>
  )
}

At this point, if you load your site in the browser a couple times and then visit your fullres analytics dashboard, you will see stats appear. This means that you are now able to see basic analytics and Core Web Vitals data in your account.

Up Next:

  • Add metadata to better understand the context of user interactions and improve your data analysis
  • Track specific events and conversions to gain insights beyond standard analytics