How to access a common object or variable in different files in ts (next.js)?

Accessing Common Objects or Variables in Different Files in TypeScript (Next.js)

Next.js uses hot reload during development, which clears the Node.js cache on every request, resetting any variables in memory. To access common objects or variables across different files, we present two viable solutions:

Solution 1: Utilizing the global Object

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 };

In this solution, we define a global variable named counter. Inside the if (process.env.NODE_ENV === "production") block, we instantiate the Counter class and assign it to the counter variable. This ensures that the counter variable is initialized only in the production environment, preventing unnecessary re-initialization during development. We then export the counter variable so that it can be accessed in other files.

Solution 2: Context API

The Context API provides a way to share state between components without passing props down through multiple levels of the component tree.

// Create the context
const CountContext = createContext(null);

// Counter provider component
export const CountProvider: React.FC = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const decrement = () => {
    setCount((prevCount) => prevCount - 1);
  };

  return (
    
      {children}
    
  );
};

// Consumer component
export const CountConsumer: React.FC = () => {
  const { count, increment, decrement } = useContext(CountContext);

  return (
    

      
Count: {count}
      
      
    
  );
};

In this solution, we create a React context named CountContext, which holds the Counter instance and provides access to its methods increment() and decrement(). To use the context, we create a CountProvider component that wraps the components that need access to the shared state. The CountConsumer component is used to access the context and its methods.

Both of these solutions allow you to access common objects or variables in different files in a Next.js application. Choose the solution that best fits your specific requirements.