Next.js - 路由

Next.js - App Router 路由基础

Next.js 在 app 目录中使用了基于文件系统的路由。文件夹定义路由段，而这些文件夹内的 page.tsx（或 .js, .jsx）文件使得路由可以公开访问。

路由约定：

根路由： app/page.tsx 映射到 /。
嵌套路由： 文件夹创建嵌套路径。app/dashboard/settings/page.tsx 映射到 /dashboard/settings。
动态路由段： 使用方括号 [] 创建匹配动态值的路由。app/blog/[slug]/page.tsx 映射到 /blog/:slug（例如，/blog/hello-world、/blog/another-post）。slug 的值会作为 prop 传递给页面组件。
捕获所有路由段： 使用带有三个点的方括号 [...folderName] 匹配多个后续的路由段。app/shop/[...filters]/page.tsx 匹配 /shop/a、/shop/a/b、/shop/a/b/c 等。
可选的捕获所有路由段： 使用双层方括号 [[...folderName]] 匹配零个或多个路由段。app/docs/[[...slug]]/page.tsx 匹配 /docs、/docs/getting-started、/docs/a/b 等。

页面间链接

客户端导航（在页面之间移动而无需浏览器完全刷新）由从 next/link 导入的 Link 组件处理。

href：要导航到的路径（例如，/dashboard、/blog/my-first-post）。这应该与你在 app 目录中定义的路由结构匹配。

Link 使用示例：

import Link from 'next/link';

function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About Us</Link>
      <Link href="/blog/latest-news">Latest News</Link>
    </nav>
  );
}

在服务器组件中抓取数据

使用 App Router 时，页面默认是 React 服务器组件（Server Components）。这允许你使用 async/await 直接在组件内部抓取数据。

让我们修改主页来抓取一些数据，例如 GitHub 上 Next.js 仓库的星标数。

更新 app/page.tsx：

import Link from 'next/link';

async function getRepoStars() {
  try {
    const res = await fetch('https://api.github.com/repos/vercel/next.js', {
      // 可选：提高开发/构建期间的性能并减少请求
      next: { revalidate: 60 } // 最多每分钟重新验证一次数据
    });
    if (!res.ok) {
      // 处理 HTTP 错误
      throw new Error(`Failed to fetch: ${res.status}`);
    }
    const json = await res.json();
    return json.stargazers_count;
  } catch (error) {
    console.error('Error fetching repo stars:', error);
    return 'N/A'; // 提供一个备用值
  }
}

export default async function HomePage() {
  const stars = await getRepoStars();

  return (
    <main>
      <h1>Welcome to Next.js!</h1>
      <p>Explore our content:</p>
      <Link href="/posts">Go to Posts</Link>
      <br />
      <p>Next.js GitHub Stars: {stars}</p>
    </main>
  );
}

注意： 在服务器组件中的数据抓取发生在服务器端。fetch 调用在服务器端执行，生成的 HTML 被发送到浏览器。Next.js 扩展了原生的 fetch API，提供了缓存和重新验证的选项（next: { revalidate: ... }）。

对于更复杂的数据抓取模式或在客户端抓取数据，请参考 Next.js 官方数据抓取文档。

启动开发服务器

如果你的服务器没有运行，请启动它：

npm run dev

验证输出

在浏览器中打开 http://localhost:3000。你现在应该看到主页，显示 Next.js 仓库在 GitHub 上的星标数（如果抓取失败则显示“N/A”）。

使用链接导航到 /posts 页面应该仍然能无缝工作。