在我的nextjs项目中导航时出现时间问题

import moment from 'moment';

const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');

import React, { useEffect, useState } from 'react';

const TimeDisplay = () => {
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <p>Current time: {currentTime.toLocaleTimeString()}</p>
    </div>
  );
};

export default TimeDisplay;

import React from 'react';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

const queryClient = new QueryClient();

const fetchTime = async () => {
  const response = await fetch('/api/time');
  const data = await response.json();
  return data;
};

const TimeDisplay = () => {
  const { data, isLoading, error } = useQuery('time', fetchTime);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <p>Current time: {data.time}</p>
  );
};

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <TimeDisplay />
    </QueryClientProvider>
  );
};

export default App;