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 ...
Collapse
 
itzsrikanth profile image
itzsrikanth

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

Collapse
 
muswain profile image
Mrutyunjay

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.

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

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.

Collapse
 
cheedie6 profile image
Cheedie

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'

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

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

Collapse
 
cheedie6 profile image
Cheedie

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?

Thread Thread
 
shareef profile image
Mohammed Nadeem Shareef

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

Collapse
 
niyongaboeric profile image
NiyongaboEric • Edited

Well articulated and helped me getting started with Typescript, NextJS and React Context API. Keep it up brother.

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Nice to hear it.😄
Follow for new blogs!

Collapse
 
pion_devel_94c71e56547785 profile image
Pion Devel

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

Collapse
 
krivoo3 profile image
OCTANE 💀

How do you pass properties to the logout methods?

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

As we are using typescript first set the type of arguments


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

Enter fullscreen mode Exit fullscreen mode

then pass make use of your properties


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

Enter fullscreen mode Exit fullscreen mode

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>
...
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vishal2369 profile image
Vishal2369

It was informative.
Thanks

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Glad it helps ☺️

Collapse
 
surafelgetachew profile image
Surafel Getachew

Great!

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Thanks! 😇

Collapse
 
jamesfthomas profile image
James F. Thomas

This is an excellent article.

Collapse
 
ayahosnym profile image
Aya Hosny • Edited

thanks a lot but If we have a lot of context files
put all of them in myApp file?

Collapse
 
tyson profile image
GlifeTyson

Many thanks