🏠 技術系プログラミング React Next.js プリレンダリングとルーティング

Next.js でブラウザ履歴で戻るボタンを表示する (router.back)

更新: 2022-02-22 / 作成: 2022-02-22

Next.js の next/router モジュールが提供する NextRouter オブジェクトの back メソッドを呼び出すと、ブラウザの履歴に従って 1 つ前のページに遷移することができます。つまり、ブラウザの「戻る」ボタンを押した場合と同じ振る舞いをします。 NextRouter オブジェクトは、useRouter フックで取得することができます。

次の BackButton コンポーネントはシンプルな「戻る」ボタンを表示し、クリック時に NextRouter#back() を呼び出します。

/p/m4dmu4c/img-001.png — 図: 戻るボタン（標準の button 版）

components/BackButton.tsx

import { FC } from 'react'
import { useRouter } from 'next/router'

export const BackButton: FC = () => {
  const router = useRouter()
  return (
    <button alia-label="戻る" type="button" onClick={() => router.back()}>
      戻る
    </button>
  )
}

上の例では、素の button コンポーネントを使っていますが、mui (Material-UI) などの UI ライブラリを使えばリッチなボタンを表示できます。

/p/m4dmu4c/img-002.png — 図: 戻るボタン（mui 版）

components/BackButton.tsx

import { FC } from 'react'
import { useRouter } from 'next/router'
import BackIcon from '@mui/icons-material/ArrowBackIosNew'
import Button from '@mui/material/Button'

export const BackButton: FC = () => {
  const router = useRouter()
  return (
    <Button aria-label="戻る" variant="contained" onClick={() => router.back()}>
      <BackIcon />
    </Button>
  )
}

Next.js

Next.js のプリレンダリングとルーティング
へ戻る

関連記事