解決 React Hook Form DevTool 顯示 hydration error

Hydration error

React Hook Form DevTool 可以快速查看表單各欄位狀態，節省大量惱人的 console.log，也可以即時確認欄位 validation 狀態
但會出現下列錯誤訊息
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

在日常開發上頗惱人，其實next 官方文件也有提到解決方法
一般會想說只是本機在用，就懶得處理了。結果就是忽略掉是其他地方報的錯，一直以為是 devTool
最後還是花了點時間處理他，也讓開發體驗更好了！

解決方法

import React from 'react';
import { DevtoolUIProps } from '@hookform/devtools/dist/devToolUI';
import dynamic from 'next/dynamic';

export const ReactHookFormDevTool = dynamic(
  async () => {
    const { DevTool } = await import('@hookform/devtools');
    return function ReactHookFormDevTool(props: DevtoolUIProps) {
      return (
        <>
            {/* `NEXT_PUBLIC_ENV` 改成自己的參數，設定成只有 local 才會看到 */}
          {process.env.NEXT_PUBLIC_ENV === 'local' && (
            <DevTool {...props} />
          )}
        </>
      );
    };
  },
  {
    ssr: false,
    loading: () => null,
  },
);