OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Load a third-party script in different routes in next js

  • Thread starter Thread starter Bahman Parsa Manesh
  • Start date Start date
B

Bahman Parsa Manesh

Guest
I added a third-party script (usercentrics -> https://app.usercentrics.eu/browser-ui/latest/loader.js) in the root layout of my Next 14/React project and it is working fine. I have a module in another page contains this code:

Code:
<div class="uc-embed" uc-layout="1" uc-data="all"></div>

link to doc

The script suppose to add some content in the div tag and when user navigates to the page, the content should be there.

But the content is there only when user refresh the page and by just navigating to the page, the div tag is empty. Next Js indicated in their doc how to add a third-party script but also indicated:

Next.js will ensure the script will only load once, even if a user navigates between multiple routes in the same layout.

https://nextjs.org/docs/app/building-your-application/optimizing/scripts

Another point is that a headless CMS (Storyblok) has been used in the project and the most of routes (including the page contains the code I have mentioned) and link to the page both come from the CMS.

So I want to know is there any way to load same script in two different pages in Next Js

<p>I added a third-party script (usercentrics -> <a href="https://app.usercentrics.eu/browser-ui/latest/loader.js" rel="nofollow noreferrer">https://app.usercentrics.eu/browser-ui/latest/loader.js</a>) in the root layout of my Next 14/React project and it is working fine.
I have a module in another page contains this code:</p>
<pre><code><div class="uc-embed" uc-layout="1" uc-data="all"></div>
</code></pre>
<p><a href="https://nextjs.org/docs/app/building-your-application/optimizing/scripts" rel="nofollow noreferrer">link to doc</a></p>
<p>The script suppose to add some content in the <code>div</code> tag and when user navigates to the page, the content should be there.</p>
<p>But the content is there only when user refresh the page and by just navigating to the page, the div tag is empty.
Next Js indicated in their doc how to add a third-party script but also indicated:</p>
<blockquote>
<p>Next.js will ensure the script will only load once, even if a user
navigates between multiple routes in the same layout.</p>
</blockquote>
<p><a href="https://nextjs.org/docs/app/building-your-application/optimizing/scripts" rel="nofollow noreferrer">https://nextjs.org/docs/app/building-your-application/optimizing/scripts</a></p>
<p>Another point is that a headless CMS (Storyblok) has been used in the project and the most of routes (including the page contains the code I have mentioned) and link to the page both come from the CMS.</p>
<p>So I want to know is there any way to load same script in two different pages in Next Js</p>
 

Latest posts

Top