下面是我的问题的最小可再现示例。我调用getServerSideProps从数据库中获取一些值，该值被设置为组件中的状态。这是因为需要更改值，以便我可以通过API将其发送回数据库。
在getServerSideProps中读取URL路径变量，以便从DB中获取适当的数据。
如果我从地址栏加载页面或更改地址栏中的URL或刷新页面，表单工作正常。
但是当我使用next/link导航到下一个页面时，旧的状态不会用新的属性刷新。
是我做错了什么，还是这是一个反模式？
先生：

import Link from "next/link";
import { useState } from "react";

export default function Home(prop: any) {
  const [name, setName] = useState(prop.data.name);
  const handleButtonClick = () => {
    //Send the name state to API.
    //await fakeAPI(name)
  };
  return (
    <>
      <h1>MRE</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />{" "}
      <button onClick={handleButtonClick}>Send to API</button>
      <div>
        <Link href={`/${prop.index - 1}`}>Back</Link>&nbsp;
        <Link href={`/${prop.index + 1}`}>Next</Link>
      </div>
    </>
  );
}

export function getServerSideProps(context: any) {
  const TEST_DB_DATA = [
    {
      name: "Test 0",
    },
    {
      name: "Test 1",
    },
    {
      name: "Test 2",
    },
  ];
  const index = parseInt(context.params?.data ?? "");
  return {
    props: {
      index,
      data: TEST_DB_DATA[index],
    },
  };
}

问题的GIF：