Context API with TypeScript and Next.JS
Tags: typescript, nextjs, contextapi, react
Published: 2021-04-04 12:53:35

## How to write context API with TypeScript and next.JS

![Photo by [Pakata Goh](https://unsplash.com/@pakata?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/developer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw0losxkfihgfm1kn7n7.jpg)  

### Why we need context?
In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. [read more](https://reactjs.org/docs/context.html)

### What is contextAPI?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.

So, now we know _why we need context_ and _what is context_ let's dive into the coding part.

Before starting, set up a basic version of the nextJS app with typescript

```npm
npx create-next-app context-api
npm install --save-dev typescript @types/react
```

Create a folder called _context_, here we will store all the different contexts. For now, create an _AuthContext.tsx_ file

### Step 1:- **_Create context type_**
Inside AuthContext.tsx.
As we are using TypeScript we have to create types for our context

```ts
type authContextType = {
    user: boolean;
    login: () => void;
    logout: () => void;
};
```

### Step 2:- **_Create context default values_**
```ts
const authContextDefaultValues: authContextType = {
    user: null,
    login: () => {},
    logout: () => {},
};
```

### Step 3:- **_createContext & useContext_**
```ts
const AuthContext = createContext<authContextType>(authContextDefaultValues);

export function useAuth() {
    return useContext(AuthContext);
}
```

### Step 4:- **_Create a provider function_**
```tsx
type Props = {
    children: ReactNode;
};

export function AuthProvider({ children }: Props) {
    const value = {
        
    }
    return (
        <>
            <AuthContext.Provider value={value}>
                {children}
            </AuthContext.Provider>
        </>
    );
}
```
We will wrap this _AuthProvider_ function, where we want to use our context, and the value prop will have the values of authContextType. We will fill up values in the next step.

### Step 4:- **_Fill up values_**
```ts
export function AuthProvider({ children }: Props) {
    const [user, setUser] = useState<boolean>(null);

    const login = () => {
        setUser(true);
    };

    const logout = () => {
        setUser(false);
    };

    const value = {
        user,
        login,
        logout,
    };

    return (
    ...
```
Now our context is ready to use.

### Step 5:- **_Enable AuthProvider_**
First, we have to enable _AuthProvider_, to do so edit the default _app.js file like so

```jsx
import { AuthProvider } from "../context/AuthContext";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
    return (
        <>
            <AuthProvider>
                <Component {...pageProps} />
            </AuthProvider>
        </>
    );
}

export default MyApp;
```
### Step 6:- **_Using context_**

Now remove all the template nextJS generate and simply import the context

```tsx
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useAuth } from "../context/AuthContext";

export default function Home() {
    const { user, login, logout } = useAuth();

    return (
        <div className={styles.container}>
            <Head>
                <title>Context-api with TypeScript and nextJS</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className={styles.main}>
                <div>
                    <h1>Hello Context</h1>
                    <h2>User: {user ? "login" : "logout"}</h2>
                    <div>
                        <button onClick={login}>Login</button>
                        <button onClick={logout}>Logout</button>
                    </div>
                </div>
            </main>
        </div>
    );
}

```
Okay many things happen here let me break it down, first we import the _context_ hook "useAuth" then inside our Home() we destructure all the values from "useAuth" then we use it as per our requirement. 

[See the live demo](https://context-api-with-nextjs-and-ts.vercel.app/)
[Github repo](https://github.com/shareef99/context-api-with-nextjs-and-ts)

[My portfolio](https://portfolio.shareef.vercel.app/)
[Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)
[twitter](https://twitter.com/shareefBhai99)