title: How do I create a statically generated header for nextJS
body: <p>I want to statically generate my navbar, so that it does not need to fetch from client side.</p>
  <p>I am using appollo graphql and my current <code>_app.js</code> looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Head from 'next/head';
  import { ApolloProvider } from '@apollo/react-hooks';
  import withData from '../utils/apollo';
  import Header from '../components/Header';
  import '../assets/css/tailwind.css';
  
  const App = (props) =&gt; {
      const { Component, pageProps, apollo } = props;
      return (
          &lt;ApolloProvider client={apollo}&gt;
              &lt;Head&gt;
                  &lt;title&gt;...&lt;/title&gt;
                  &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, width=device-width&quot; /&gt;
                  &lt;meta charset=&quot;utf-8&quot;&gt;&lt;/meta&gt;
              &lt;/Head&gt;
              &lt;Header /&gt;
              &lt;Component {...pageProps} /&gt;
          &lt;/ApolloProvider&gt;
      );
  };
  
  export default withData(App);
  </code></pre>
  <p>And my <code>Header</code> component looks like this</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useState } from 'react';
  import Link from 'next/link';
  import Query from '../components/query';
  import CATEGORIES_QUERY from '../apollo/queries/category/categories';
  
  const Header = () =&gt; {
      const [isExpanded, setIsExpanded] = useState(false);
      const expandedClasses = isExpanded ? 'flex ' : 'hidden ';
  
      return (
          &lt;Query query={CATEGORIES_QUERY} id={null}&gt;
              {({ data: { categories } }) =&gt; {
                  return (
                      &lt;React.Fragment&gt;
                          &lt;nav
                              className={`${expandedClasses}`}
                          &gt;
                              {categories.map((category, i) =&gt; {
                                  return (
                                      &lt;Link
                                          href=&quot;/category/[cid]&quot;
                                          as={`/category/${category.id}`}
                                          passHref
                                          key={`nav-link-${i}`}
                                      &gt;
                                          &lt;a className=&quot;text-gray-800&quot;&gt;
                                              {category.name}
                                          &lt;/a&gt;
                                      &lt;/Link&gt;
                                  );
                              })}
                          &lt;/nav&gt;
  
                          &lt;button
                              className=&quot;flex&quot;
                              onClick={() =&gt; {
                                  setIsExpanded(!isExpanded);
                              }}
                          &gt;
                              &lt;span className=&quot;mb-1 bg-orange-500&quot;&gt;&lt;/span&gt;
                              &lt;span className=&quot;mb-1 bg-orange-500&quot;&gt;&lt;/span&gt;
                              &lt;span className=&quot;mb-1 bg-orange-500&quot;&gt;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/React.Fragment&gt;
                  );
              }}
          &lt;/Query&gt;
      );
  };
  
  export default Header;
  </code></pre>
  <p>Next.js only allows getStaticProps on page components, I am trying to get a similar functionality on my Header Component.
  I tried adding getStaticProps on header component and also on _app.js that did not work.
  How can I achieve this?</p>