reactjs - I next.js, uppgradera sidor -> app-router inkrementellt, hur delar man state med context provider?

Jag försöker göra en stegvis uppgradering från pages till app-router med ett Next.js-projekt.

Jag har en <SessionProvider> i min _app som använder localStorage i kombination med useState för att lagra min sessionstoken.

Något sådant här:

const useLocalStorage = <T>(key: string, defaultValue: T) => {
  const [value, setValue] = useState(() => {
    let currentValue;

    try {
      currentValue = JSON.parse(
        localStorage.getItem(key) || String(defaultValue)
      );
    } catch (error) {
      currentValue = defaultValue;
    }

    return currentValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value, key]);

  return [value, setValue];
};

…

const [sessionToken, setSessionToken] = useLocalStorage<string | null>("session_token", null);

Problemet jag tror jag har är att denna SessionProvider renderas både i den gamla /pages/_app.page.tsx och i den nya /app/layout.tsx - det är olika instanser - med olika tillstånd. Så även om localStorage delas, är det interna tillståndet inte det.

Om jag nu har en skyddad sida under app-routern som omdirigerar till en inloggningssida under den gamla sideroutern, verkar följande hända om jag felsöker detta korrekt:

Appens routers kontextleverantör initialiseras utan ett värde. Eftersom användaren inte är inloggad omdirigeras denne till inloggningssidan under /pages där användaren loggar in, men under en annan instans av kontextleverantören i komponentträdet. När användaren sedan omdirigeras tillbaka till den första skyddade sidan läses inte local-storage om från den första kontextleverantören och tillståndet har inte uppdaterats av inloggningen.

Så sättet useLocalStorage används på är inte reaktivt från lokal lagring och fungerar därför endast som en singleton med skrivreaktivitet till lokal lagring.

Så :

• Finns det någonstans i Next där jag kan lägga en omslutande komponentlayout som delas mellan app-router och pages-router? Så att jag kan ha samma ContextProvider mellan båda?
• Eller finns det ett enklare sätt att göra detta utan att gå in på signaler eller singeltonsstatus?
• Eller hur brukar jag göra detta i React om jag inte kan dela komponenthierarkin?

Jag ser att jag möjligtvis kan använda https://usehooks.com/uselocalstorage som verkar vara reaktiv från localstorage: https://github.com/uidotdev/usehooks/blob/dfa6623fcc2dcad3b466def4e0495b3f38af962b/index.js#L616

men jag vill hellre ha något enklare…