HOC: withRecoil + nextjs

import { AppProps } from 'next/app';
import { RecoilRoot } from 'recoil';

export function withRecoil<T extends AppProps = AppProps>(
  WrappedComponent: React.ComponentType<T>
) {
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'Component';

  const Component = (props: Omit<T, keyof AppProps>) => {
    return (
      <RecoilRoot>
        <WrappedComponent {...(props as T)} />
      </RecoilRoot>
    );
  };
  Component.displayName = `withRecoil(${displayName})`;
  return Component;
}