Error: No router instance found. You should only use “next/router” on the client side of your app.のエラーを解決
Contents
動作環境
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
}
関連記事

amplifyで dynamodbの運用方法のメモ()
amplify push でschema.graphqlのファイルでエラー am ...

cypress 使い方・入門
動作環境 amplifyでcypressを使うことを前提に書いてます。 簡単な手 ...

Image is missing required “src” property:のエラー
エラーの状況 amplifyでnextjsのImageタグを使ってブラウザに表示 ...

Not Authorized to access XXXXXXX on type Query
How to resolve the error. Not Authorized ...

amplify mock no schema available と表示される
動作環境 MacOSAWS amplifynpm 症状 コマンドラインからamp ...