我在App.tsx中有一个react应用程序，代码如下

function App() {
  let date = new Date();
  // storing full name of all months in array
  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];

  const [currentMonth, SetCurrentMonth] = useState<string>(
    months[date.getMonth()]
  );
  const [currentYear, SetCurrentYear] = useState<number>(date.getFullYear());

  const changeMonth = (val: string) => {
    // if clicked icon is previous icon then decrement current month by 1 else increment it by 1
    if (val === "prev") {
      if (currentMonth === "January") {
        SetCurrentMonth(months[11]);
        SetCurrentYear((currentYear) => currentYear - 1);
      } else {
        SetCurrentMonth(months[months.indexOf(currentMonth) - 1]);
      }
    } else {
      if (currentMonth === "December") {
        SetCurrentMonth(months[0]);
        SetCurrentYear((currentYear) => currentYear + 1);
      } else {
        SetCurrentMonth(months[months.indexOf(currentMonth) + 1]);
      }
    }
  };

  return (
    <div className="App">
      <Routes>
        <Route
          path="/"
          element={
            <>
              <ViewSelector />
              <Summary
                monthNumber={months.indexOf(currentMonth)}
                month={currentMonth}
                year={currentYear}
                onClick={changeMonth}
              />
            </>
          }
        />
        <Route
          path="/calendar/:player"
          element={
            <>
              <ViewSelector />
              <Calendar
                date={date}
                monthNumber={months.indexOf(currentMonth)}
                month={currentMonth}
                year={currentYear}
                onClick={changeMonth}
              />
            </>
          }
        />
        <Route
          path="/manage"
          element={
            <>
              <ViewSelector />
              <Manage />
            </>
          }
        />
      </Routes>
    </div>
  );
}

export default App;

在React中，我们使用Routes和Route创建路由，并将某些状态变量（currentMonth、currentYear ...）传递给特定路由。
现在，我尝试在Nextjs中重写这个应用程序，但是我无法弄清楚如何将状态变量（currentMonth，currentYear ...）从index.tsx传递到其他页面（因为它们是各自文件夹中的单独index.tsx文件）
有人能给我带路吗？