I am using the following route structure:
/courses/[course]/[lesson]/[chapter]

The layout is adaptive, so the mobile layout is rendered server-side, and then it changes depending on the device type:

import { useEffect, useState } from "react";
import useDeviceType, { Device } from "./useDeviceType";
import { IAppContext } from "../contexts/AppContext";

export default function useAppContext(urlParams: Record<string, string>) {
  const device = useDeviceType();

  const [loaded, setIfLoaded] = useState(false);

  useEffect(() => setIfLoaded(true), []);

  return {
    device: loaded ? device : Device.MOBILE,
    loaded,
    urlParams,
  } satisfies IAppContext;
}

I want to move to the next chapter (e.g. increase [chapter] by one), while still preserving the current design (so that the user doesn't get a flash of the mobile design). Shallow routing didn't help with this. Any ideas?