title: How to use Context Api in Next.js
body: <p>First I would like to say to I've never worked with either next.js or the context api so please bear with me.</p>
  <p>I'm currently working on a web application in Next.js where I have multiple pages that each contain a form. I would like to have a global state of some sort in order to be able to set and update the data from each form. All form data together</p>
  <p>For example: page 1 = name, page 2 = description, ...</p>
  <p>From what I've read online, I thought that using the context api would be sufficient, but I've hit a wall. When I fill in the name on the first form it doesn't get saved in the global state because it doesn't show up on the second page.</p>
  <p>I don't understand where I went wrong so any help i more than welcome!</p>
  <p>p.s. if i didn't explain some part right or forgot to add some code snippet please let me know.</p>
  <p>businessContext.tsx</p>
  <pre><code>import { createContext, useState } from &quot;react&quot;;
  
  //accessible data
  export interface BusinessContextData {
    businessName: string;
    handleBusinessName: (name: string) =&gt; void;
  }
  
  //default values
  export const businessContextDefaultValue: BusinessContextData = {
    businessName: &quot;&quot;,
  };
  
  //provider
  export const BusinessContext = createContext&lt;BusinessContextData&gt;(
    businessContextDefaultValue
  );
  
  //hooks that components can use to change the values
  export function useBusinessContextValue(): BusinessContextData {
    const [businessName, setBName] = useState&lt;string&gt;(&quot;&quot;);
  
    const handleBusinessName = (name: string) =&gt; {
      setBName(name);
    };
  
    return {
      businessName,
      handleBusinessName,
    };
  }
  </code></pre>
  <p>_app.tsx</p>
  <pre><code>import type { AppProps } from &quot;next/app&quot;;
  import {
    useBusinessContextValue,
    BusinessContext,
  } from &quot;../context/businessContext&quot;;
  import &quot;../styles/global.css&quot;;
  
  function MyApp({ Component, pageProps }: AppProps) {
    const businessContextValue = useBusinessContextValue();
  
    return (
      &lt;BusinessContext.Provider value={businessContextValue}&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/BusinessContext.Provider&gt;
    );
  }
  
  export default MyApp;
  </code></pre>
  <p>businessName.tsx - name form page (should save the given name in global state)</p>
  <pre><code>import { ChangeEvent, FormEvent, useContext, useState } from &quot;react&quot;;
  import { BusinessContext } from &quot;../context/businessContext&quot;;
  
  const IndexPage = () =&gt; {
    const { handleBusinessName } = useContext(BusinessContext);
    const router = useRouter();
    const [businessNameState, setBusinessnameState] = useState&lt;string&gt;(&quot;&quot;);
  
    const onSubmit = (e: FormEvent) =&gt; {
      handleBusinessName(businessNameState);
      router.push(&quot;/businessVision&quot;);
    };
  
    return (
          ...
          &lt;form onSubmit={(e: FormEvent) =&gt; onSubmit(e)}&gt;
            &lt;div className=&quot;formInputRow&quot;&gt;
              &lt;input
                className=&quot;formInput&quot;
                type=&quot;text&quot;
                placeholder=&quot;Business name&quot;
                required
                value={businessNameState}
                onChange={(val: ChangeEvent&lt;HTMLInputElement&gt;) =&gt;
                  setBusinessnameState(val.target.value)
                }
              /&gt;
            &lt;/div&gt;
            &lt;button type=&quot;submit&quot;&gt;
              Next
            &lt;/button&gt;
          &lt;/form&gt;
          ...
    );
  };
  
  export default IndexPage;
  </code></pre>
  <p>businessVision.tsx - should display business name from global state</p>
  <pre><code>import { ChangeEvent, FormEvent, useContext, useEffect, useState } from &quot;react&quot;;
  import { BusinessContext } from &quot;../context/businessContext&quot;;
  
  const BusinessVisionpage = () =&gt; {
    const { businessName } = useContext(BusinessContext);
    const router = useRouter();
    const [businessVisionState, setBusinessVisionState] = useState&lt;string&gt;(&quot;&quot;);
  
    return (
          ...
          &lt;h1&gt;
            &lt;span&gt;{businessName}&lt;/span&gt;
          &lt;/h1&gt;
          ...
    );
  };
  
  </code></pre>