Using Context Providers (in _app.js) with Dynamic Routes?

[laurendorman]

Hello all,

I am using a Context Provider in my _app.js file and it has been working really well so far across the app so far.

import React from 'react';
import App from 'next/app';

import { AuthProvider } from '../hooks/useAuth';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <AuthProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AuthProvider>
    );
  }
}

However, when I attempt to generate dynamic routes (from data in DatoCMS) that require a user to be authorized, the Context is not available.

import { useAuth } from '../../hooks/useAuth';
import { getPageBySlug, getAllPagesWithSlug } from '../../lib/api';

function DynamicPage({ page }) {
  const { user } = useAuth();

  // Stripped out a bunch of components/content here, but this is the general idea
  return (
    <>
      {user ? (
        <div>
         <h2>{page.title}</h2>
         <p>{page.content}</p>
        </div>
      ) :  null}
    </>
  );
}

export async function getStaticProps({ params }) {
  const page = (await getPageBySlug(params.slug)) || {};

  return {
    props: {
      page,
    },
  };
}

export async function getStaticPaths() {
  const pages = await getAllPagesWithSlug();
  return {
    paths: pages?.allPages.map((page) => `/page/${page}`) || [],
  };
}

export default DynamicPage;

The pages are generated but are no longer rendered properly because they don't have information about the Context Provider.

I'd also like to add that this works as expected in local dev.

Would creating a HOC help with the issue? Any help here would be appreciated.

Cheers!

[revskill10]

Could you try move the Provider component into the page instead of _app.js ?
I'm using that approach (wrap all page components with custom provider with initial value from getStaticProps)

[laurendorman]

Unfortunately not, but thank you for the suggestion!

[jamesmosier]

getStaticProps and getStaticPaths get executed at build time so there is no way for Next to know about what user will be viewing the page. It worked locally because getStaticProps and getStaticPaths are called on every request during local dev.

[laurendorman]

Okay! That's sort of where my head was at with this.

I will work on a HOC component to perhaps remedy this.

Thanks!

[Lorezz]

@laurendorman I have the same problem in multiple pages, have you found a solution for that?
I'have persisted in sessionStorage the context data for now but I'm not happy with that,
and I think that a HOC could compromise the SSG part...