What is the best way to access a shared object or variable across multiple files in TypeScript with Next.js?

Question

What is the best way to access a shared object or variable across multiple files in TypeScript with Next.js?

I'm working with Next.js and have a single file containing the following code:

export let counter = 0;

In the first API route file /api/test1, I increment the counter by 5 like this:

counter += 5;

In the second API file /api/test2, I try to access the updated value of the counter:

console.log('counter', counter); // 5

However, I keep getting 0 instead;

Is there a way for me to access the current value of the counter in the second file?

p.s. This is a simplified version of my issue, using a counter example.

javascript typescript next.js

Answer 1

Answer №1

Throughout the development process, Next.js employs hot reload functionality to clear the Node.js cache with each request, effectively resetting any variables stored in memory.

As a workaround, one option is to utilize the global object, as demonstrated below:

class Counter {
  private count: number;

  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  getCount() {
    return this.count;
  }
}

let counter: Counter;

declare global {
  var counter: Counter;
}

if (process.env.NODE_ENV === "production") {
  counter = new Counter();
} else {
  if (!global.counter) {
    global.counter = new Counter();
  }
  counter = global.counter;
}

export { counter };

You can find more information about this approach in this post.

Answer 2

Throughout the development process, Next.js employs hot reload functionality to clear the Node.js cache with each request, effectively resetting any variables stored in memory.

As a workaround, one option is to utilize the global object, as demonstrated below:

class Counter {
  private count: number;

  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  getCount() {
    return this.count;
  }
}

let counter: Counter;

declare global {
  var counter: Counter;
}

if (process.env.NODE_ENV === "production") {
  counter = new Counter();
} else {
  if (!global.counter) {
    global.counter = new Counter();
  }
  counter = global.counter;
}

export { counter };

You can find more information about this approach in this post.

What is the best way to access a shared object or variable across multiple files in TypeScript with Next.js?

Answer №1

Similar questions

Can someone please help troubleshoot my ajax code?

How can I prevent all code paths from causing errors in Typescript with Vuex?

I am encountering an error where authManager is not defined

Adding basic data to an array dynamically

Bringing in the component's individual module

ReactJS frontend is experiencing issues resolving a significant number of its node modules all of a sudden

Manipulating <param> input using <button>

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Issue with logical operator ""!"" functionality in ejs file

Encountered the error 'unable to read property 'then' of undefined', even though a Promise was returned

Reset radio buttons upon submission without encountering any issues

The constructor THREE.OrbitControls is not valid and I am unsure how to proceed

Generate the maximum capacity 3D box that can be inscribed within a set of points

How to Overcome Read-only HTML Components in Selenium with Python?

How can you animate a MUI v4 Grid element using CSS transitions?

Issue: Unable to locate the name 'ContactField' in Ionic 2

What steps can be taken to capture and store all console logs, errors, and warnings in a text file when a button is clicked?

What is the proper way to insert a JavaScript file into jQuery code using the script tag?

What is the process for transferring items using ref ObjectId's?

Angular 6 allows for the use of radio buttons to dynamically enable or disable corresponding fields