Sharing Data Across Next.js Components Using Context API and Hooks (with REST API Example)

When building React or Next.js applications, one of the most common tasks is sharing data between components. A simple way to do this is by passing data as props from a parent component down to its child components.

While this approach works fine for small projects, it quickly becomes problematic in larger, more complex applications.

Here’s why,

• When the data needs to be accessed by deeply nested components, you end up passing props through multiple layers of components that don’t even need the data themselves, a problem known as prop drilling.
• This makes your code harder to maintain, harder to read, and prone to bugs as the app grows.
• If multiple components in different parts of the app need the same data, you’d have to restructure your component tree just to share that data properly.

This is not considered a good practice for large scale or scalable applications.

The better solution?

Use React's Context API combined with Hooks to create a global data store. This allows any component in your app to access or update shared state without passing props manually through every level of the component tree.

In this article, I’ll show you a simple, beginner friendly example of how to,

• Fetch user data from a REST API
• Store it in a Context
• Access it from any component using the useContext() hook

By the end, you’ll see how this pattern improves your app’s structure and makes your code more maintainable and scalable.

What is Context API and React Hooks?

Context API lets you create a global data store that can be accessed from any component without prop drilling.

React Hooks like useState, useEffect, and useContext allow functional components to manage state and side effects.

Together, they make it easy to manage and share data globally in your application.

Example Scenario

We want to,

• Fetch a user's profile from a REST API
• Share that data globally
• Access it inside a UserProfile component

1.Create the Context

What’s happening here?

• Created a User interface for our user object.
• Created a UserContextType for the shape of context value.
• Created the context using createContext().
• Used useState to store user data and useEffect to fetch data.
• Provided the user data globally via UserContext.Provider.

2.Create a Global Providers Wrapper

3.Wrap Your Application in layout.tsx

4.Access the Context in a Component

What’s happening here?

• Imported useContext to consume UserContext.
• Displayed a loading message while data fetches.
• Displayed user name and email once available.

Now, when your app loads,

• It fetches the user data once.
• Stores it in a global context.
• Any component can read it using useContext().

Conclusion

React's Context API combined with Hooks is a simple, powerful pattern for managing and sharing global state in Next.js 14+ apps especially when working with REST APIs.

Instead of passing data manually via props, you create a global context and let any component access or update shared data efficiently.

This TypeScript based implementation ensures type safety and scalable architecture, preparing your app for larger, more complex use cases.