Error: No router instance found. You should only use “next/router” on the client side of your app.のエラーを解決

7月 13, 2022

動作環境

Amplify
Next.js
MacOSでnpm run buildで発生

エラーの表示内容は以下の通り。

Error: No router instance found.
You should only use "next/router" on the client side of your app.

    at getRouter (/Users/****/****/*****/*****/node_modules/next/dist/client/router.js:117:15)
    at Object.singletonRouter.<computed> [as push] (/Users/****/****/*****/*****/node_modules/next/dist/client/router.js:94:24)
    at signOut (/Users/****/****/*****/*****/.next/server/pages/sign_out.js:49:56)

npm run devで実行中はエラーを出さなかったので気づきませんでしたが、npm run buildしたら、エラーになっていました。

実際のエラーを出したコード

以下のようなログアウトをするためのsign_out.tsxのファイルで発生していました。
ファイルの内容は以下のような感じです。

const SignOutPage: FC = () => {

  signOut()

  return null
}

const signOut = async (): Promise<void> => {
  try {
    await Auth.signOut();
  } catch (error) {
    console.log('Error Logging Out', error);
  }
  Router.push("/")
};

解決

以下のように変更したら、解決しました。

import Router, { useRouter } from 'next/router';

const SignOutPage: FC = () => {
  const router = useRouter()

  const signOut = async (): Promise<void> => {
    
    try {
      await Auth.signOut();
    } catch (error) {
      console.log('Error Logging Out', error);
    }
    router.push("/")
  };

  return null
}