История браузера в NextJS

Роутер из next/navigation умеет ходить по уже накопленной истории: метод back открывает предыдущий адрес, метод forward - следующий после отката. Оба вызываются без аргументов.

Давайте разместим две кнопки на одной странице. В page.jsx получим useRouter и повесим на кнопки методы back и forward:

'use client';

import { useRouter } from 'next/navigation';

export default function TestPage() {
	let router = useRouter();
	
	return (
		<div>
			<button type="button" onClick={() => router.back()}>
				Back
			</button>
			<button type="button" onClick={() => router.forward()}>
				Forward
			</button>
		</div>
	);
}

На странице /about добавьте пару кнопок для шага назад и вперед по истории после нескольких переходов по сайту.