router.pushで自身のページをpushした時、「Too many re-renders」となる

Question

Next.jsでシステムを作っていますが、router.pushで自身のページのパスを指定して実行した時にToo many re-rendersエラーが出ます。

ソースコード

実際はもっとたくさんありますが、主要なファイルは２つあります。/user/settings/accountまたは/user/settings/securityにアクセスした状態でSettingsComponent.tsxにあるリンクをクリックすると必ずエラーが発生します。

import styles from '../../../styles/CommonPageBase.module.scss'
import { MouseEvent, useEffect } from 'react';
import { GetServerSideProps } from 'next'
import Header from '../../../components/global/Header';
import { useTranslation } from 'react-i18next';
import PropsPicker, { CommonProps } from '../../../models-server/data/props';
import SettingsComponent from '../../../components/page/user/SettingsComponent';

export default function Settings(props: CommonProps) {
  const [ t, i18n ] = useTranslation();
  i18n.changeLanguage(props.lang);
  
  return (
    <div className={`${styles.theme1} theme1`}>
      <SettingsComponent props={props}/>
    </div>
  )
}

// getServerSideProps

import styles from './Settings.module.scss'
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/dist/client/router';
import Link from 'next/link';
import { CommonPropsWrapper } from '../../../models-server/data/props';

export default function SettingsComponent(props: CommonPropsWrapper) {
  const [ t, i18n ] = useTranslation();

  return (
    <div className={`${styles.theme1} theme1`}>
      <div className={styles.settings}>
        <Link href='/user/settings/account'>アカウント</Link>
        <Link href='/user/settings/security'>セキュリティ</Link>
      </div>
    </div>
  )
}

なおこのシステムではreCAPTCHAを使っているため、_app.tsxにて以下の設定をおこなっています。

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <GoogleReCaptchaProvider reCaptchaKey={RECAPTCHA_SITE_KEY}>
      <Component {...pageProps} />
    </GoogleReCaptchaProvider>
  );
}

実現したいこと

SettingsComponent.tsxにあるLinkが正しく動作するようにしたいです。

発生している問題・エラーメッセージ

/user/settings/accountにアクセスした状態で「セキュリティ」のリンクをクリックすると/user/settings/securityに遷移するはずですが、以下の２つが発生します。まずToo many re-rendersをなんとかしたいです。

/user/settings/accountと/user/settings/securityどちらも/user/settings/[tab].tsxを参照するため、router.pathnameは変わりません。このときにrouter.pushしようとすると、自分の環境ではエラーが必ず発生します。

 1 of 2 unhandled errors

Unhandled Runtime Error
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Call Stack
renderWithHooks
node_modules\react-dom\cjs\react-dom.development.js (14997:0)
updateFunctionComponent
node_modules\react-dom\cjs\react-dom.development.js (17356:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (19063:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4056:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (23964:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (22776:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (22707:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (22293:0)
eval
node_modules\react-dom\cjs\react-dom.development.js (11327:0)
unstable_runWithPriority
node_modules\scheduler\cjs\scheduler.development.js (468:0)
runWithPriority$1
node_modules\react-dom\cjs\react-dom.development.js (11276:0)
flushSyncCallbackQueueImpl
node_modules\react-dom\cjs\react-dom.development.js (11322:0)
flushSyncCallbackQueue
node_modules\react-dom\cjs\react-dom.development.js (11309:0)
scheduleUpdateOnFiber
node_modules\react-dom\cjs\react-dom.development.js (21893:0)
updateContainer
node_modules\react-dom\cjs\react-dom.development.js (25482:0)
legacyRenderSubtreeIntoContainer
node_modules\react-dom\cjs\react-dom.development.js (26037:0)
Object.render
node_modules\react-dom\cjs\react-dom.development.js (26103:0)
renderReactElement
node_modules\next\dist\client\index.js (494:21)
doRender
node_modules\next\dist\client\index.js (801:4)
_callee$
node_modules\next\dist\client\index.js (390:18)
tryCatch
node_modules\next\dist\compiled\regenerator-runtime\runtime.js (45:15)
Generator.invoke [as _invoke]
node_modules\next\dist\compiled\regenerator-runtime\runtime.js (274:0)
prototype.<computed> [as next]
node_modules\next\dist\compiled\regenerator-runtime\runtime.js (97:0)
asyncGeneratorStep
node_modules\next\dist\client\index.js (29:28)
_next
node_modules\next\dist\client\index.js (47:16)
eval
node_modules\next\dist\client\index.js (52:12)
new Promise
<anonymous>
eval
node_modules\next\dist\client\index.js (44:15)
render
node_modules\next\dist\client\index.js (381:19)
Router.subscription [as sub]
node_modules\next\dist\client\index.js (354:47)
Router.set
node_modules\next\dist\shared\lib\router\router.js (1156:20)
_callee$
node_modules\next\dist\shared\lib\router\router.js (861:28)
tryCatch
node_modules\next\dist\compiled\regenerator-runtime\runtime.js (45:15)
Generator.invoke [as _invoke]
node_modules\next\dist\compiled\regenerator-runtime\runtime.js (274:0)
prototype.<computed> [as next]
node_modules\next\dist\compiled\regenerator-runtime\runtime.js (97:0)
asyncGeneratorStep
node_modules\next\dist\shared\lib\router\router.js (37:28)
_next
node_modules\next\dist\shared\lib\router\router.js (55:16)

 2 of 2 unhandled errors

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'logging')

Call Stack
Array.<anonymous>
https://www.gstatic.com/recaptcha/releases/CHIHFAf1bjFPOjwwi5Xa4cWR/recaptcha__ja.js (246:215)
Array.<anonymous>
https://www.gstatic.com/recaptcha/releases/CHIHFAf1bjFPOjwwi5Xa4cWR/recaptcha__ja.js (144:497)
<unknown>
https://www.gstatic.com/recaptcha/releases/CHIHFAf1bjFPOjwwi5Xa4cWR/recaptcha__ja.js (145:404)

補足情報（FW/ツールのバージョンなど）

expressを使っていますが、Next.jsでカスタムサーバーは使用していません。

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "accept-language": "^3.0.18",
    "cookie": "^0.4.2",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "i18next": "^20.4.0",
    "next": "^12.2.2",
    "normalize.css": "^8.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-google-recaptcha-v3": "^1.10.0",
    "react-i18next": "^11.11.4",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@types/cookie": "^0.4.1",
    "@types/cookie-parser": "^1.4.2",
    "@types/express": "^4.17.13",
    "@types/node": "^16.4.13",
    "@types/react": "^17.0.16",
    "@types/react-dom": "^17.0.9",
    "@types/uuid": "^8.3.1",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "sass": "^1.37.5",
    "typescript": "^4.3.5"
  }

Comments

[askyq]

ごめんなさい、正確には以下の２つの場合でエラーが発生します。冒頭の質問文に齟齬があり申し訳ありません。

* 自身のページ（`[tab].tsx`）へアクセスする`Link`タグをクリックした場合
* 自身のページへアクセスするよう`router.push`を実行した場合（今回のソースコードには書いていません）

なお`Link`タグが内部で`router.push`または`router.replace`を行うことは`node_modules/next/dist/client/link.js`で確認済です。

Answer 1

数週間以上悩んでた割に質問の直後で申し訳ないですが、useTranslationの問題でした。

https://github.com/i18next/react-i18next/issues/553
このページを参考に、changeLanguageをuseEffect内で行うようにしたら解決しました。
お騒がせしました。

  const [ t, i18n ] = useTranslation();
  
  useEffect(() => {
    i18n.changeLanguage(props.lang);
  }, []);