# Error with NextJS setup

**URL:** <https://community.piwik.pro/t/error-with-nextjs-setup/602>\
**Category:** Data collection and tags\
**Created:** [April 19, 2022, 4:21pm UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602 "2022-04-19T16:21:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stephane\_Piette](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/stephane_piette/32/323_2.png) [@Stephane\_Piette](https://community.piwik.pro/u/Stephane_Piette)\
**Post date:** [April 19, 2022, 4:21pm UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/1 "2022-04-19T16:21:50Z")

</div>

Hello,

I am trying to setup Piwik into a NextJS project (react frontend framework).  
I am trying to import the Javascript like this:

```auto
<Script strategy="lazyOnload">
              {`
                (function(window, document, dataLayerName, id) {
                [...]
                })(window, document, 'dataLayer', 'XXXX_XXX_XXXX_XXX');
              `}
</Script>

```

But there is an error when I run the code:

```auto
SyntaxError: missing } after property list

```

I have also tried that without result:

```auto
<Script
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: [....]}}></Script>

```

The snippet works when I ran it into a simple dummy html file, but no way to make it work with NextJS.

Any feedback on that ?  
Thanks

---

<div class="post-metadata">

**Author:** ![Roman\_Sek](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/roman_sek/32/282_2.png) [@Roman\_Sek](https://community.piwik.pro/u/Roman_Sek)\
**Post date:** [April 20, 2022, 12:57pm UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/2 "2022-04-20T12:57:35Z")

</div>

It looks like a typo in JS code you are not showing in the example. Try using NextJS example for google analytics as a base ([link](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)) and replace both of the “Script” tags in the “\_app.js” file with following tag:

```auto
  <Script
    id="piwik-init"
    strategy="afterInteractive"
    dangerouslySetInnerHTML={{
      __html: `
(function(window, document, dataLayerName, id) {
window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"}
var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
tags.async=!0,tags.src="//XXXX.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
!function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
})(window, document, 'dataLayer', 'XXXX-XXXX-XXXX-XXXX-XXXX')
        `,
    }}
  />

```

---

<div class="post-metadata">

**Author:** ![Stephane\_Piette](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/stephane_piette/32/323_2.png) [@Stephane\_Piette](https://community.piwik.pro/u/Stephane_Piette)\
**Post date:** [April 20, 2022, 2:24pm UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/3 "2022-04-20T14:24:20Z")

</div>

@Roman_Sek that did not fix anything; I had the same code but did not work.

But I managed to solve the issue somehow: I copied the javascript code into JS file and properly formatted the code. I then put this formatted code as the \_\_html attribute, and then it worked.

Maybe there is a problem with the minified JS being read by typescrip/nextjs or whatnot.

So this worked:

```auto
<Script
              id="piwik-init"
              strategy="afterInteractive"
              dangerouslySetInnerHTML={{
                __html: `
                (function (window, document, dataLayerName, id) {
                        window[dataLayerName] = window[dataLayerName] || [], window[dataLayerName].push({
                            start: (new Date).getTime(),
                            event: "stg.start"
                        });
                        var scripts = document.getElementsByTagName('script')[0], tags = document.createElement('script');

                        function stgCreateCookie(a, b, c) {
                            var d = "";
                            if (c) {
                                var e = new Date;
                                e.setTime(e.getTime() + 24 * c * 60 * 60 * 1e3), d = "; expires=" + e.toUTCString()
                            }
                            document.cookie = a + "=" + b + d + "; path=/"
                        }

                        var isStgDebug = (window.location.href.match("stg_debug") || document.cookie.match("stg_debug")) && !window.location.href.match("stg_disable_debug");
                        stgCreateCookie("stg_debug", isStgDebug ? 1 : "", isStgDebug ? 14 : -1);
                        var qP = [];
                        dataLayerName !== "dataLayer" && qP.push("data_layer_name=" + dataLayerName), isStgDebug && qP.push("stg_debug");
                        var qPString = qP.length > 0 ? ("?" + qP.join("&")) : "";
                        tags.async = !0, tags.src = "https://troedelspende.containers.piwik.pro/" + id + ".js" + qPString, scripts.parentNode.insertBefore(tags, scripts);
                        !function (a, n, i) {
                            a[n] = a[n] || {};
                            for (var c = 0; c < i.length; c++) !function (i) {
                                a[n][i] = a[n][i] || {}, a[n][i].api = a[n][i].api || function () {
                                    var a = [].slice.call(arguments, 0);
                                    "string" == typeof a[0] && window[dataLayerName].push({
                                        event: n + "." + i + ":" + a[0],
                                        parameters: [].slice.call(arguments, 1)
                                    })
                                }
                            }(i[c])
                        }(window, "ppms", ["tm", "cm"]);
                    })(window, document, 'dataLayer', 'XXXXXX');
            `,
              }}
            />

```

---

<div class="post-metadata">

**Author:** ![anthonybartczak](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/anthonybartczak/32/2430_2.png) [@anthonybartczak](https://community.piwik.pro/u/anthonybartczak)\
**Post date:** [September 23, 2022, 8:25am UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/4 "2022-09-23T08:25:02Z")

</div>

Hi!

One additional way that works for me is to install the Piwik PRO container via the `_document.js/ts/jsx/tsx` file. You can add it to the tag (async container) or tag (sync container) like this:

```auto
<script
  dangerouslySetInnerHTML={{
    __html: `insert you container code here`,
  }}
></script>

```

---

<div class="post-metadata">

**Author:** ![Piotrek](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/piotrek/32/160_2.png) [@Piotrek](https://community.piwik.pro/u/Piotrek)\
**Post date:** [September 30, 2022, 11:51am UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/5 "2022-09-30T11:51:34Z")

</div>

Hello @Stephane_Piette,

This is Piotr from the Data Collection & Integrations team, I have some news to share.

We have developed a brand new dedicated tracking library for NextJS and we will be releasing it in the next couple of weeks. Once it’s out, you will be able to use a dedicated solution for Piwik PRO in your NextJS projects. I’ll update this thread when that happens. Stay tuned!

---

<div class="post-metadata">

**Author:** ![jfrisby](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/jfrisby/32/831_2.png) [@jfrisby](https://community.piwik.pro/u/jfrisby)\
**Post date:** [October 17, 2022, 9:19pm UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/6 "2022-10-17T21:19:35Z")

</div>

Any update on the Next.js integration?

---

<div class="post-metadata">

**Author:** ![Piotrek](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/piotrek/32/160_2.png) [@Piotrek](https://community.piwik.pro/u/Piotrek)\
**Post date:** [October 19, 2022, 2:48pm UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/7 "2022-10-19T14:48:18Z")

</div>

@jfrisby @Stephane_Piette

Good news! The library for NextJS is ready and we have released it on our NPM:

> **[@piwikpro/next-piwik-pro](https://www.npmjs.com/package/@piwikpro/next-piwik-pro)**
>
> Piwik PRO tracking library for Next.js. Latest version: 1.0.4, last published: a month ago. Start using @piwikpro/next-piwik-pro in your project by running \`npm i @piwikpro/next-piwik-pro\`. There are no other projects in the npm registry using...

---

<div class="post-metadata">

**Author:** ![Dominik\_Goss](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dominik_goss/32/3489_2.png) [@Dominik\_Goss](https://community.piwik.pro/u/Dominik_Goss)\
**Post date:** [June 13, 2024, 4:48am UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/8 "2024-06-13T04:48:29Z")

</div>

Hi @Piotrek, the idea with NPM library for NextJS is great.  
I did try it and now I trying to figure out to use it also with NextJS Metadata on layout.tsx

When I mark the layout.tsx as ‘use client’ to work with PiwikPro provider than I can not set meta globally 🙂

Do you or your team have any idea how can I use your library without setting main layout.tsx as ‘use client’? 🤞

---

<div class="post-metadata">

**Author:** ![anthonybartczak](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/anthonybartczak/32/2430_2.png) [@anthonybartczak](https://community.piwik.pro/u/anthonybartczak)\
**Post date:** [June 13, 2024, 8:12am UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/9 "2024-06-13T08:12:54Z")

</div>

Hi @Dominik_Goss,

We’ll look into this and get back to you 🙂 .

---

<div class="post-metadata">

**Author:** ![anthonybartczak](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/anthonybartczak/32/2430_2.png) [@anthonybartczak](https://community.piwik.pro/u/anthonybartczak)\
**Post date:** [July 10, 2024, 8:38am UTC](https://community.piwik.pro/t/error-with-nextjs-setup/602/10 "2024-07-10T08:38:56Z")

</div>

Hi @Dominik_Goss,

We’ve introduced some changes that should remove the need of using `use client`.  
You can check our example app too:

> **[next-piwik-pro/example at master · PiwikPRO/next-piwik-pro](https://github.com/PiwikPRO/next-piwik-pro/tree/master/example)**
>
> Library for implementing Piwik PRO in Next.js web applications - PiwikPRO/next-piwik-pro