Load external script using JavaScript in Next.js

Question

A while ago I made a relatively massive app for a single developer for my own personal use - a "social media" of sorts. I wrote it in React.js

I have recently decided to revisit the app and revamp it - primarily make it server-side rendered using Next.js.

The key problem is loading the themes. I had a feature where I would programmatically add an external script tag to the end of the body which would manipulate the canvas and show some animations.

I had no issues when I worked with React, as everything got loaded the way I expected it to, but when it comes to Next, that simply isn't the case. The script tag loads, but the code doesn't get executed.

The most important files I have issues with are:

My _document.jsx file:

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { BASE_URL as base } from '../config'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      
        
            
            
            
            
            
            
            
        
        
            
            
            
        
        
            
            
            
          
        
      
    )
  }
}
  
export default MyDocument

My _app.jsx file:

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { ThemeProvider } from "../contexts/ThemeContext";
import { FontProvider } from "../contexts/FontContext";
import { DevProvider } from "../contexts/DevContext";
import { LanguageProvider } from "../contexts/LanguageContext";
// import { SocketProvider } from "../contexts/SocketContext";
import { ColourProvider } from "../contexts/ColourContext";
import PageContent from '../components/layout/PageContent/PageContent';
import { useStore } from '../store';
import { useEffect } from "react"
import { Provider } from 'react-redux';
import Head from 'next/head';
import { BASE_URL as base } from '../config';
import Nav from "../components/layout/Nav/Nav"
import setAuthToken from '../utils/setAuthToken';
import { getUser } from '../actions/auth';

function MyApp({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState);
  useEffect(() => {
    if (localStorage.getItem('token')) {
      setAuthToken(localStorage.getItem('token'))
    }
    store.dispatch(getUser())
  })
  return (
    <>
      
        
        
        
        
        
        
        
                
        
        Impulse
      
      
      
        
          
            {/*  */}
              
                
                  
                    
                      
                      
                    
                  
                
              
            {/*  */}
          
        
      
    
  )
}

export default MyApp

My useScript.js hook

import { useRef } from "react"
import { BASE_URL as base } from "../config"
// actually, it's supposed to load a single script, not more of them
const useScripts = (script) => {
  const scriptLoaded = useRef(false);
  if (typeof window !== "undefined" && !scriptLoaded.current && script) {
    const element = document.createElement("script");
    element.src = `${base}/static/canvasThemes/${script}.js`;
    element.type = "text/javascript";
    const position = document.querySelector("head");
    position.appendChild(element);
    scriptLoaded.current = true;
  }
};

export default useScripts

My PageContent.jsx file, which was previously referenced in the _app.jsx file:

import React, { useContext, useEffect, useState } from "react";
import { ThemeContext } from "../../../contexts/ThemeContext";
import { FontContext } from "../../../contexts/FontContext";
import { ColourContext } from "../../../contexts/ColourContext";
import StyledPageContent from '../../../styled/StyledPageContent';
import useScripts from "../../../hooks/useScript";
import cookie from 'cookie-cutter'

function PageContent(props) {
  const { isDarkTheme, toggleTheme } = useContext(ThemeContext);
  const { isLegacyFont } = useContext(FontContext);
  const { colour } = useContext(ColourContext)
  const [theme, setTheme] = useState("")
  useEffect(() => {
    const newOne = cookie.get("isDarkTheme")
    console.log("NJUUAN _APP", newOne);
    setTheme(() => newOne)
  }, [])
  useScripts(theme)

  return (
    
      {props.children}
    
  );
}

export default PageContent;

I'm looking for a way to add a script programmatically and immediately execute it.

Important: ALL script tags I want to add are considered "themes", which would grab the canvas from the _document and manipulate its background colour/fill/add text etc.

I have been trying a million different things for a month now and am starting to lose hope.

Not sure if I'll get any help, but thanks in advance all the same!

Load external script using JavaScript in Next.js

0 Answers