title: getStaticProps values are undefined
body: <p>i am using getStaticProps along with getStaticPaths with fallback=false so that only a few routes are allowed at render. And it was mentioned in docs that you must use getStaticProps so to pass this as props in the page. But the problem is that the props are getting consoled as undefined.</p>
  <pre><code>export const getStaticPaths = async () =&gt; ({
    paths: [
      { params: { panel: 'heat' } },
      { params: { panel: 'asset-tags' } },
      { params: { panel: 'test-tags' } },
      { params: { panel: 'power-consumption' } },
      { params: { panel: 'fuel-tags' } },
      { params: { panel: 'flow-meter-board' } },
      { params: { panel: 'totalizers' } },
      { params: { panel: 'pi-data' } },
    ],
    fallback: false,
  });
  export const getStaticProps = async ({ params }) =&gt; {
    console.log(params, 'here');   // THIS IS NOT APPEARING IN CONSOLE
    return {
      props: {
        panel: params.panel,
      },
    };
  };
  AND THE COMPONENT SIMPLY IS AS BELOW
  export default Board({panel}){
     return &lt;div&gt;{conole.log(panel}&lt;/div&gt; // THIS IS GETTING UNDEFINED
  }
  
  </code></pre>
  <p>This is a page with slug. &quot;pageName/[panel].js&quot;</p>
  <p>BELOW IS THE _app.js file</p>
  <pre><code>function App(props) {
    const { Component, ...pageProps } = props;
    const router = useRouter();
    const [isLoggedIn, setLoggedIn] = React.useState(false);
    const [user, setUser] = React.useState({ name: '', email: '' });
    const [loaded, setLoaded] = React.useState(false);
    React.useEffect(() =&gt; {
      (async () =&gt; {
        try {
          const credentials = await Auth.currentAuthenticatedUser();
          setLoggedIn(true);
          setUser({
            name: credentials.attributes.name,
            email: credentials.attributes.email,
          });
          setLoaded(true);
        } catch (err) {
          router.push('/auth');
          setLoggedIn(false);
          setLoaded(true);
        }
      })();
  
      configureAmplify();
      return () =&gt; {};
    }, []);
    React.useEffect(() =&gt; {
      Hub.listen('auth', (data) =&gt; {
        switch (data.payload.event) {
          case 'signOut': {
            setLoggedIn(false);
            setUser({ name: '', email: '' });
            router.push('/auth');
            break;
          }
          default:
        }
        return null;
      });
  
      return () =&gt; {
        Hub.remove('auth');
      };
    });
    const authContextValues = React.useMemo(
      () =&gt; ({
        isLoggedIn,
        setLoggedIn,
        user,
        setUser,
      }),
      [isLoggedIn, setLoggedIn, user, setUser]
    );
  
    return (
      &lt;AuthContext.Provider value={authContextValues}&gt;
        &lt;Provider&gt;
          &lt;&gt;
            &lt;Head&gt;
              &lt;meta
                name=&quot;viewport&quot;
                content=&quot;width=device-width, initial-scale=1&quot;
              /&gt;
              &lt;meta name=&quot;description&quot; content=&quot;Drishya Slingshot nextjs&quot; /&gt;
              &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
              &lt;meta
                name=&quot;viewport&quot;
                content=&quot;initial-scale=1, width=device-width&quot;
              /&gt;
            &lt;/Head&gt;
            {!loaded &amp;&amp; (
              &lt;div className=&quot; vh-100 d-flex align-items-center justify-content-center&quot;&gt;
                &lt;Spinner /&gt;
              &lt;/div&gt;
            )}
            {loaded &amp;&amp; &lt;Component {...pageProps} /&gt;}
          &lt;/&gt;
        &lt;/Provider&gt;
      &lt;/AuthContext.Provider&gt;
    );
  }
  
  
  export default App;
  
  </code></pre>