【Next.js】コンポーネントが2回連続で読み込まれる仕様を解除したい

コードのエラーを検出しやすくするため、Reactでは開発環境でのみコンポーネントが2回レンダリングされる仕様となっています。これによりデータの取得が連続して行われ、開発環境で一部のデータが常に重複表示されてしまいました。

データ重複のないよう条件分岐を設定しようとしても解決できなかったため、Next.jsでreactStrictModeを解除することにしました。

コード

const nextConfig = {
  reactStrictMode: false,
  ...
};
module.exports = nextConfig

デフォルトでtrueとなっている、reactStrictModeをfalseにするだけです。多少デメリットはあると思いますが、データの重複があまりにも気持ち悪かったためreactStrictModeをオフにしました。

まとめ

基本はreactStrictModeをtrueの状態で進めようと思いますが、今回のような現象が発生した際はreactStrictModeの変更でクリティカルな問題が発生しないようであればreactStrictModeをfalseにしてしまおうかなと。

小規模開発ならではとういことで。