Dynamic Navbar content in an otherwise static page

[yasserelsaid]

I have a navbar that changes its content depending on whether the user is signed in or not. I want to use getStaticProps to get the props for the rest of the page but this makes the navbar pre-rendered and if the user logs in it stays the same.

The navbar is implemented in the _app page as it is shared between all the pages.

Here is my code:

function MyApp({ Component, pageProps, appProps }) {
  return (
    <React.Fragment>
      <Header
        links={
          <HeaderLinks user={appProps.user} />
        }
      />
        <Component {...pageProps} {...appProps} />
      <MyFooter />
    </React.Fragment>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const { token } = parseCookies(ctx);
  let appProps = {};
  // if (Component.getInitialProps) {
  //   pageProps = await Component.getInitialProps(ctx);
  // }
  if (!token) {
    const isProtectedRoute =
      ctx.pathname === '/account' || ctx.pathname === '/create';
    if (isProtectedRoute) {
      redirectUser(ctx, '/login');
    }
  } else {
    try {
      const payload = { headers: { Authorization: token } };
      const url = `${baseUrl}/api/account`;
      const response = await axios.get(url, payload);
      const user = response.data;
      // if authenticated but not admin or root then redirect from the create page
      const isRoot = user.role === 'root';
      const isAdmin = user.role === 'admin';
      const isNotPermitted = !(isRoot || isAdmin) && ctx.pathname === '/create';
      if (isNotPermitted) {
        redirectUser(ctx, '/');
      }
      appProps.user = user;
    } catch (error) {
      console.error('Error getting current user', error);
      // delete invalid tokens
      destroyCookie(ctx, 'token');
      // redirect to login
      redirectUser(ctx, '/login');
    }
  }
  return { appProps };
};

export default MyApp;

I am wondering if there is any way I can make the content of the page statically generated using getStaticProps but the navbar props be dynamic so when the use logs in only the nav bar changes

[NateRadebaugh]

If you're using mdx for your static pages, consider the following:

• https://github.com/hashicorp/next-mdx-enhanced
• https://github.com/hashicorp/next-mdx-remote