不能应用动态路由whit nextjs

Question

我正在学习nextJS，并且陷入了动态路线的困境。 我在/pages内创建了一个名为“ details”的文件夹，并在其中创建了[slug].js，然后在我的主页中将链接标记放在地图函数中。 问题是它不起作用。没有打开[slug].js文件。为什么我做错了？

谢谢！ 这是我的代码：

Home.js

import React from "react";
import Context from "../../config/Context";
import Link from "next/link";

const Home = () => {
    const context = React.useContext(Context);

    return context.events.map(event => (
      <ul>
        <li key={event.id}>
          <Link href="/details/[slug]" as={`/details/${event.slug}`}>
              <a>{event.slug}</a>
          </Link>
        </li>
      </ul>
    ));
  };

export default Home;

页面/详细信息/[slug].js

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  return (
    <>
      <h1>Blog post</h1>
      <p>Post id: {router.query.id}</p>
    </>
  )
}