# Next.js Quickstart Guide

[Next.js](https://nextjs.org/) is a popular front-end framework for building React-based applications optimized for server-side rendering (SSR) and static website generation. While we usually recommend using React's [`useEffect`](https://react.dev/reference/react/useEffect) [hook as a way to initialize the Freshpaint SDK](https://documentation.freshpaint.io/readme/guides/quickstart/installing-the-freshpaint-javascript-sdk-with-server-side-rendering-ssr-+-react), **Next.js requires its own special approach to integrating Freshpaint with your application.** Next.js provides a built in component called [`Script`](https://nextjs.org/docs/pages/api-reference/components/script) that is used to add additional JavaScript to the page.

Below is an example of a Next.js component you might create to add the Freshpaint SDK to the page and initialize it for your site's Freshpaint environment.

```tsx
import React from 'react'
import Script from 'next/script';

export default function FreshpaintSnippet() {
  return (
    <>
      <Script
        id="freshpaint-snippet"
        dangerouslySetInnerHTML={{
          __html: `
            (function(){function p(r,e){(e==null||e>r.length)&&(e=r.length);for(var t=0,a=new Array(e);t<e;t++)a[t]=r[t];return a}function v(r){if(Array.isArray(r))return p(r)}function h(r){if(typeof Symbol!="undefined"&&r[Symbol.iterator]!=null||r["@@iterator"]!=null)return Array.from(r)}function A(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function I(r,e){if(r){if(typeof r=="string")return p(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor&&(t=r.constructor.name),t==="Map"||t==="Set")return Array.from(t);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return p(r,e)}}function y(r){return v(r)||h(r)||I(r)||A()}var E=function(r,e){if(!e.__SV){try{var t,a,m=window.location,c=m.hash,x=function(n,o){return t=n.match(new RegExp(o+"=([^&]*)")),t?t[1]:null};c&&x(c,"fpState")&&(a=JSON.parse(decodeURIComponent(x(c,"fpState"))),a.action==="fpeditor"&&(window.sessionStorage.setItem("_fpcehash",c),history.replaceState(a.desiredHash||"",r.title,m.pathname+m.search)))}catch(S){}e.__loaded=!1,e.config=!1,e.__SV=2,window.freshpaint=new Proxy(e,{get:function(n,o){return n[o]!==void 0?n[o]:o==="init"?function(l,u,i){var _,d;(_=n)[d="_i"]||(_[d]=[]),n._i.push([l,u||{},i||"freshpaint"])}:function(){for(var l=arguments.length,u=new Array(l),i=0;i<l;i++)u[i]=arguments[i];var _=[o].concat(y(u));return n.push(_),new Proxy(_,{get:function(f,w){return f[w]?f[w]:function(){for(var b=arguments.length,g=new Array(b),s=0;s<b;s++)g[s]=arguments[s];f.length=0,f.push([o].concat(y(u))),f.push([w].concat(y(g)))}}})}}})}};E(document,window.freshpaint||[]);})();
            freshpaint.init("YOUR FRESHPAINT ENVIRONMENT ID HERE");
            freshpaint.page();
          `
        }}
      />
      <Script src="https://freshpaint-cdn.com/js/YOUR FRESHPAINT ENVIRONMENT ID HERE/freshpaint.js" />
    </>
  )
}
```

### Finding your Freshpaint Web snippet

The contents of each `Script` component's JavaScript source correspond to the two `script`  tags found in the Freshpaint application under the **Web** integration of the **Sources** page at <https://app.freshpaint.io/sources>. You should see the modal containing your Freshpaint snippets below by clicking the **Configure** button next to the **Web** integration:

![](/files/N9NiivYaku1eqi4wrEmc):

Let's take a look at each `Script` component in more detail.

### The first Script component

```tsx
      <Script
        id="freshpaint-snippet"
        dangerouslySetInnerHTML={{
          __html: `
            (function(){function p(r,e){(e==null||e>r.length)&&(e=r.length);for(var t=0,a=new Array(e);t<e;t++)a[t]=r[t];return a}function v(r){if(Array.isArray(r))return p(r)}function h(r){if(typeof Symbol!="undefined"&&r[Symbol.iterator]!=null||r["@@iterator"]!=null)return Array.from(r)}function A(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function I(r,e){if(r){if(typeof r=="string")return p(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor&&(t=r.constructor.name),t==="Map"||t==="Set")return Array.from(t);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return p(r,e)}}function y(r){return v(r)||h(r)||I(r)||A()}var E=function(r,e){if(!e.__SV){try{var t,a,m=window.location,c=m.hash,x=function(n,o){return t=n.match(new RegExp(o+"=([^&]*)")),t?t[1]:null};c&&x(c,"fpState")&&(a=JSON.parse(decodeURIComponent(x(c,"fpState"))),a.action==="fpeditor"&&(window.sessionStorage.setItem("_fpcehash",c),history.replaceState(a.desiredHash||"",r.title,m.pathname+m.search)))}catch(S){}e.__loaded=!1,e.config=!1,e.__SV=2,window.freshpaint=new Proxy(e,{get:function(n,o){return n[o]!==void 0?n[o]:o==="init"?function(l,u,i){var _,d;(_=n)[d="_i"]||(_[d]=[]),n._i.push([l,u||{},i||"freshpaint"])}:function(){for(var l=arguments.length,u=new Array(l),i=0;i<l;i++)u[i]=arguments[i];var _=[o].concat(y(u));return n.push(_),new Proxy(_,{get:function(f,w){return f[w]?f[w]:function(){for(var b=arguments.length,g=new Array(b),s=0;s<b;s++)g[s]=arguments[s];f.length=0,f.push([o].concat(y(u))),f.push([w].concat(y(g)))}}})}}})}};E(document,window.freshpaint||[]);})();
            freshpaint.init("YOUR FRESHPAINT ENVIRONMENT ID HERE");
            freshpaint.page();
          `
        }}
      />
```

In the code above, there are a few important things to note:

1. Next.js requires that a unique `id` attribute be defined on any `Script` component that does NOT use the `src` attribute to reference a remote JavaScript source file. This must be defined or Next.js will not be able to properly render the `script` HTML element onto the page.
2. The value of the prop `dangerouslySetInnerHTML.__html` comes from the first `script` tag in your Freshpaint environment's **Web** integration snippet (described in the section above).

### The second Script component

```tsx
<Script src="https://freshpaint-cdn.com/js/YOUR FRESHPAINT ENVIRONMENT ID HERE/freshpaint.js" />
```

In the code above, the value of the `src` attribute comes from the second `script` tag in your Freshpaint environment's **Web** integration snippet (described in the section above).

### Rendering the FreshpaintSnippet component in your Next.js application

The best location to render your new `FreshpaintSnippet` component in your Next.js application will depend upon what kind of Next.js application you are building, and the structure of your application. In general, we recommend rendering the `FreshpaintSnippet` component in one of the "root" components of your application. Your `FreshpaintSnippet` should only render onto the page one time, and should remain rendered on the page for the lifetime of your Next.js application.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.freshpaint.io/readme/guides/next.js-quickstart-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.