Tips for transferring a variable from Next.js to a plain JavaScript file

Question

Tips for transferring a variable from Next.js to a plain JavaScript file

When it comes to Canvas Dom operations in my NextJs file, I decided to include a Vanilla JS file using 'next/script'. The code for this is:

<Script id="canvasJS" src="/lib/canvas.js" ></Script>

. Everything seems to be working fine at the moment. However, I now face the challenge of passing a variable (like an ID) from the NextJs file to the Vanilla File without any user interaction. While I have managed to make it work with onClick using ()=>functionName(value), the process of passing a value without user interaction still puzzles me. If anyone has some insight or advice on how to achieve this, I would greatly appreciate it. Thank you in advance, Frank

javascript next.js

Answer 1

Answer №1

If you want a simple way to access the hydrated props coming from the server in your vanilla JavaScript script, just read

window.__NEXT_DATA__.props.pageProps

.

Alternatively, you can try something like this:

import { useLayoutEffect } from 'React';
import Script from 'next/script';

export default function Component() {

  useLayoutEffect(() => {
   // Perform actions with variables and external scripts here
  },[]);

  return (
    <>
      <Script src="/lib/canvas.js"/>
    </>
  )
}

If you're unsure about what exactly canvas.js does, consider using the useLayoutEffect hook. This will ensure that your code runs after the script has been loaded and browser's DOM has been updated.

For more information on next/script, check out the documentation page at: https://nextjs.org/docs/basic-features/script

Answer 2

If you want a simple way to access the hydrated props coming from the server in your vanilla JavaScript script, just read

window.__NEXT_DATA__.props.pageProps

.

Alternatively, you can try something like this:

import { useLayoutEffect } from 'React';
import Script from 'next/script';

export default function Component() {

  useLayoutEffect(() => {
   // Perform actions with variables and external scripts here
  },[]);

  return (
    <>
      <Script src="/lib/canvas.js"/>
    </>
  )
}

If you're unsure about what exactly canvas.js does, consider using the useLayoutEffect hook. This will ensure that your code runs after the script has been loaded and browser's DOM has been updated.

For more information on next/script, check out the documentation page at: https://nextjs.org/docs/basic-features/script

Answer 3

Answer №2

One approach I like to take is utilizing local storage.

In my scenario, I utilize a getServerSideProps(ctx) function to check for a board ID in the URL. If no ID is found, I generate a unique one.

I then pass on the props. On the client side, I extract the bid from the props and store it in local storage:

Next.js

if (typeof window !== "undefined") 
{
  localStorage.setItem('bid', bid) ;  
}

Later, in a separate vanilla JS file, I retrieve the ID using:

Vanilla JS

const bid = localStorage.getItem('bid');

Answer 4

One approach I like to take is utilizing local storage.

In my scenario, I utilize a getServerSideProps(ctx) function to check for a board ID in the URL. If no ID is found, I generate a unique one.

I then pass on the props. On the client side, I extract the bid from the props and store it in local storage:

Next.js

if (typeof window !== "undefined") 
{
  localStorage.setItem('bid', bid) ;  
}

Later, in a separate vanilla JS file, I retrieve the ID using:

Vanilla JS

const bid = localStorage.getItem('bid');

Tips for transferring a variable from Next.js to a plain JavaScript file

Answer №1

Answer №2

Similar questions

What steps can be taken to revert this Node.js module to a particular version and ensure it does not automatically update in

Running NPM module via Cordova

Transferring JavaScript files via Node server using NowJS

The entire Sphere Geometry in three.js is not completely encompassed by the texture

Tips for populating an HTML input with the value of a link element using JQuery

JavaScript Class experiencing issues with returning NAN when using the Multiplication method

What causes the first button to be clicked and the form to be submitted when the enter key is pressed within a text

Incorporating React components into your current Django project

Utilizing a function as an argument in another function (with specified parameters)

Using the power of jQuery, execute a function only once when the element is clicked

How to deactivate the <a> tag with Ant Design UI Library

Include the distribution file from the npm package in the final build

JavaScript obtain scroll position of a child element

Why is the ionChange/ngModelChange function being triggered from an ion-checkbox even though I did not specifically call it?

How can I use jQuery to automatically redirect to a different HTML page after updating a dynamic label?

Preserve the ajax controls while uploading files

Is there a comparable Javascript alternative to the Ruby gem "site_prism" for Page Objects design?

The issue I'm facing with Angular 8 is that while the this.router.navigate() method successfully changes the URL

Having trouble getting the JavaScript slider to animate

XMLHttpRequest response: the connection has been terminated