我已经创建了一个后上市的应用程序，并在每个职位点击用户将被重定向到单一的详细信息页面的职位
index.js（文章列表）

export default function Home(props) {
    const [postData, setPostData] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts", { next: { revalidate: 10 } })
            .then((res) => res.json())
            .then((data) => {
                setPostData(data);
            });
    }, []);

    const cardArr = postData.map((post) => <Card data={post} key={post.id} />);

    return (
        <Layout>
            <Header>
                <div>Posts</div>
            </Header>
            {cardArr}
        </Layout>
    );
}

字符串
[id].js（单篇文章详情页）

export const PostPage = (props) => {
    const router = useRouter();

    const [post, setPost] = useState({});

    useEffect(() => {
        fetch(`https://jsonplaceholder.typicode.com/posts/${router.query.id}`, {
            next: { revalidate: 1000 },
        })
            .then((res) => res.json())
            .then((data) => {
                setPost(data);
            });
    }, []);

    return (
        <Layout>
            <Header>
                <div className={styles.header}>{post.title}</div>
            </Header>
            <div>{post.body}</div>
        </Layout>
    );
};

export default PostPage;

型
我正在尝试实现路由缓存。这样，如果我去一个职位，然后向服务器发出请求，数据将被缓存。下一次，如果我去同一个路由在一段时间内，然后而不是从服务器获取数据，它应该显示数据从该高速缓存。
我遵循了下一个js文档，

{ next: { revalidate: 10 } }

型
但它不工作，请指导我，如果我错过了什么。