路由

Next.js 提供了一个文件系统为基础的路由系统，这意呀着你不需要额外配置路由，只需在 pages 目录下创建 .js 或 .tsx 文件，Next.js 就会自动为这些文件创建路由。以下是关于 Next.js 路由的一些关键概念和用法：

基本路由

• Index Pages: 在 pages 文件夹下的任何文件都会被映射到相应的路由。例如，pages/index.js 对应网站的根路径 /。
• Dynamic Routes: 通过在文件名中使用方括号（如 [id].js），你可以创建动态路由。比如，pages/posts/[id].js 可以匹配 /posts/1、/posts/2 等等。
• Nested Routes: 你可以创建嵌套的路由，通过在文件名中使用多个方括号（如 [...slug].js），来匹配多个路径参数。比如，pages/posts/[...slug].js 可以匹配 /posts/1、/posts/2、/posts/3/4 等等。

链接跳转

Next.js 提供了 <Link> 组件用于客户端导航。这意味着当你点击一个链接时，页面不会重新加载，而是只更新需要改变的部分，提升了用户体验。

import Link from "next/link";

function Home() {
  return (
    <div>
      <Link href="/about">
        <a>关于我们</a>
      </Link>
    </div>
  );
}

export default Home;

动态路由参数

对于动态路由，你可以使用 useRouter 钩子来获取路由参数。

import { useRouter } from "next/router";

function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <p>帖子 ID: {id}</p>;
}

export default Post;

这里，如果访问 /posts/1，则 id 的值将是 1。

编程式导航

除了使用 <Link> 组件进行声明式导航外，你还可以使用 router.push 方法进行编程式导航。

import { useRouter } from "next/router";

function ReadMoreButton() {
  const router = useRouter();

  return <button onClick={() => router.push("/about")}>阅读更多</button>;
}

export default ReadMoreButton;

路由预取

Next.js 默认对 <Link> 组件的目标页面进行预取，当用户悬停在一个链接上时，它会在后台预先加载该页面的内容，从而加快实际点击后的页面加载速度。这个行为是自动的，不需要开发者做额外的设置。

通过这些基础，你应该能够开始在 Next.js 中构建复杂的路由结构。无论你是想创建静态页面还是动态应用，Next.js 的路由系统都提供了灵活而强大的解决方案。