DEV Community

Context API with TypeScript and Next.JS

Mohammed Nadeem Shareef on April 04, 2021

How to write context API with TypeScript and next.JS Why we need context? In a typical React application, data is passed ...

Read full post

Cheedie • Jul 7 '22

Hi. Good day. I went through your article and it was very infomative and got me started on using context in next js and typescript. I encountered an error while setting up. Please would you help me look at it to know what i did wrong.
This is the error i am getting when assigning value in the provider

Type '(ContextType | Dispatch>)[]' is missing the following properties from type 'ContextType': currentPage, numberofItemstoDisplayts(2739)
index.d.ts(331, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps'

Mohammed Nadeem Shareef • Jul 8 '22

I would be helpful if you send a repo that have this issue so that I can look into it.

Cheedie • Jul 8 '22

unfortunately it is a work repo so it is private. Please is there another way i can send it to you. Do you mind having a google meet call with me?

Mohammed Nadeem Shareef • Jul 12 '22

Okay. Let's connect on LinkedIn. My LinkedIn profile

itzsrikanth • Oct 11 '21

A very informative article.
But having one doubt of how context persists across different pages since NextJs does not act as a SPA?

Mrutyunjay • Oct 28 '21

As long as the provider is wrapped in the MyApp function in _app.tsx, it basically is available across pages. The provider is basically the parent of all components including all next.js pages in the way it is specified in _app.tsx file.

Mohammed Nadeem Shareef • Oct 12 '21

I am not sure but I think NextJS handles it under the hood, I have used context in NextJS projects and It was persists across different pages.

Vishal2369 • Apr 4 '21

It was informative.
Thanks

Mohammed Nadeem Shareef • Apr 4 '21

Glad it helps ☺️

OCTANE 💀 • Nov 4 '21

How do you pass properties to the logout methods?

Mohammed Nadeem Shareef • Nov 6 '21

As we are using typescript first set the type of arguments


type authContextType = {
    user: boolean;
    login: () => void;
    logout: (someParameter: any) => void;
};

then pass make use of your properties


const logout = (someParameter: any) => {
        // use of your parameters
        setUser(false);
};

And finally pass it to the function, where you are using it.

...
<div>
    <button onClick={login}>Login</button>
    <button onClick={() => logout(someProperty)}>Logout</button>
</div>
...

Pion Devel • Apr 19 '23

Hi Nadeem,

My name is Liady fouad and I'm a junior front end developer from Italy. So I'm building a web app with Next 13, Firebase and Open Ai API.This is actually my first project on Next js. I was using Next auth to get data and encounter some problems retrieving the UID. So i switch to firebaseAuth but got blocked there also. I read your article about how to authenticate with with google and Next js and found it very interesting .

So i have several problems with my project:I want to get the UID first and i want to integrate stripe to get subscription plans.

I was wondering if you can take a look at my code and help me out with these problems. I can pay 5$ to 10$ per hour.

Please let me know if you’re interested(I really need help🤗).

Thanks again