Next.js Discord

Discord Forum
, for enabling use of the Desmos API. I've tried using Script from nextjs/script to inject the script in the layout.js file but it seems to not be injecting properly. Can anyone offer any help on this?ThanksDesmos API: https://www.desmos.com/api/v1.0/docs/index.html","dateCreated":"2024-11-23T23:59:33.818Z","answerCount":29,"author":{"@type":"Person","name":"Rex"},"suggestedAnswer":{"@type":"Answer","text":"you can add scrips using the

Injecting Desmos API Script into NextJS project

Unanswered
Rex posted this in #help-forum
Open in Discord
RexOP
Hello, I've noticed that NextJS doesn't have a public/index.html file, which is where I'd usually inject this script <script src="https://www.desmos.com/api/v1.0/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>, for enabling use of the Desmos API. I've tried using Script from nextjs/script to inject the script in the layout.js file but it seems to not be injecting properly. Can anyone offer any help on this?

Thanks

Desmos API: https://www.desmos.com/api/v1.0/docs/index.html

29 Replies

@Barbary Lion you can add scrips using the <Script /> tag in the <Head /> of the layout
RexOP
Hey, I've tried that but to no avail, the Head tag is said to be deprecated, I'm doing it this way but the script isnt properly being loaded

import { Inter } from 'next/font/google'
import "./globals.css"
import { AuthProvider } from './contexts/AuthContext'
import Navbar from './components/Navbar'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Learning Platform',
  description: 'A platform for continuous learning',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
      <Script
          src="https://www.desmos.com/api/v1.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"
          strategy="beforeInteractive"
        />
    </html>
  )
}
That works for me in my projects
In your case 
    <html lang="en">
<head>
      <Script
          src="https://www.desmos.com/api/v1.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"
          strategy="beforeInteractive"
        />
</head>
      <body className={inter.className}>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
Barbary Lion
Hm, that's odd
RexOP
Yeah, idk
Barbary Lion
Have you tried something like https://github.com/ysulyma/desmos-react
RexOP
Yeah that's what I'm using
I did npm i desmos-react and added the script to the layout.js file but still
I get the Desmos is not defined error
// import { Mafs, Coordinates, Plot, Theme, Point, Text } from "mafs";
import {Expression, GraphingCalculator, useHelperExpression} from "desmos-react";
import Script from "next/script";

import "mafs/core.css";
import "./styles.scss";

/* useHelperExpression() can only be used inside <GraphingCalculator/>,
which is why this couldn't go in <Demo/> */
function Point() {
  const a = useHelperExpression({latex: "a"});

  let label;
  if (a > 0)
    label = "positive x-axis"
  else if (a < 0)
    label = "negative x-axis"
  else
    label = "origin";

  return (
    <Expression id="point" latex="(a,0)" label={label} showLabel />
  );
}


export default function ParabolaPlot({ equation }) {

  return (
    <>
    <Script
          src="https://www.desmos.com/api/v1.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"
        />
    
    <GraphingCalculator
      attributes={{className: "calculator"}}
      fontSize={18} keypad projectorMode
    >
      <Expression id="slider" latex="a=3" />
      <Point />
    </GraphingCalculator>
    </>
  )
}
Barbary Lion
Ah ok, that's weird I'm not too sure then. What's the strategy="beforeInteractive" for?
RexOP
For loading the script before any Next.js code and before any page hydration occurs.
I tried adding the script to both the layout.js file and directly into the component
still nothing
Barbary Lion
Have you tried loading it on page load?
RexOP
you mean without the strategy?
Barbary Lion
Chatgpt claims "Since Desmos is a client-side library, add its script dynamically using a useEffect hook to ensure it runs only in the browser environment"
RexOP
hmm
i'll try
Barbary Lion
yea it's worth a shot seems weird though that it doesn't work like a normal script
RexOP
same thing
useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://www.desmos.com/api/v1.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6";
    script.async = true;
    script.onload = () => {
      // Initialize the Desmos calculator after the script is loaded
      const calculatorElement = document.getElementById("calculator");
      const calculator = Desmos.GraphingCalculator(calculatorElement);
      // Additional configurations can go here
      calculator.setExpression({ id: 'graph1', latex: 'y=x^2' }); // Example
    };
    document.body.appendChild(script);

    // Cleanup to remove the script if the component is unmounted
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="calculator" style={{ width: "600px", height: "400px" }}></div>;
@Barbary Lion yea it's worth a shot seems weird though that it doesn't work like a normal script
RexOP
oh well, idk why this script is being so weird, but thanks for your help
RexOP
@Barbary Lion It works! I dont know exactly what the problem is, but it worked once I took the component code and put it in the same file that I was calling it in
Thanks!
Barbary Lion
Oh nice, glad to hear that!!