In my nextjs project I have the following case: Let's say I have two templates, myTemplate1 & myTemplate2.
In myTemplate1 after I render my components I have script. E.g:
return (... {renderComponents()} <script src="myscript.js" /> );
This script do something like, displays a virtual toolbox for users.
The case is that if from myTemplate1 page click on a next/link which navigates me to myTemplate2, this virtual toolbox (from script initialization) exists also, I guess because of client routing. Only if I refresh manually the page I get rid of script code after navigating from myTemplate1.
I tried to use appendChild and removeChild at useEffect return but nothing works properly.
Is there any way to avoid this situation, without refreshing the page manually/or from code?