Next.jsで戻るリンク

以下のような感じで戻るリンクを実装しようとした所、

import { useRouter } from 'next/router'

<Link href='#' onClick={router.back()} >
  戻る
</Link>

エラーが発生
No Router Instance
next/routerがサーバー側(SSR、SSG)実行時に参照できないことが原因

解決策

• コールバック定義とすることでリンクのクリック(=クライアント側)でのみ評価される
• Linkのhrefは必須なので"#"を指定

import { useRouter } from 'next/router'

<Link href="#">
  <a onClick={() => { router.back() }} >
    戻る
  </a>
</Link>

参考

Next.JS Error: No router instance found