BrowserHistoryAPIManipulation.tsx

import { useState, useEffect } from 'react';

const PageOne = () => <h1>Page One</h1>
const PageTwo = () => <h1>Page Two</h1>

export default function Home() {
  const [page, setPage] = useState(-1);

  const pages = [PageOne, PageTwo];
  const Page = pages[page];

  useEffect(() => {
    const currentHistoryState = window.history.state ?? {};

    const onPopState = (event) => {
      setPage(event.state?.location);
    };

    const newHistoryState = {
      ...currentHistoryState,
      location: -1
    }

    window.history.pushState(newHistoryState, '', '/');

    window.addEventListener('popstate', onPopState);

    return () => window.removeEventListener('popstate', onPopState);
  }, [])

  return (
    <main>
      {page === -1 && <h1>Hello Next.js</h1>}
      {page !== -1 && pages[page] && <Page />}

      {page >= pages.length && <h1>The end.</h1>}

      <button
        onClick={() => {
          const next = page + 1;
          setPage(next);
          window.history.pushState(
            { ...(window.history.state ?? {}), location: next },
            '',
            '/'
          );
        }}
      >
        Next Page
      </button>

    </main>
  );
}