Next.js Pages Router版：一看就上手！

2024-02-08 17:22:01

准备好了吗？让我们踏上 Next.js Pages Router 版的精彩旅程，开启一场愉快高效的开发之旅！本文将提供一份详尽易懂的指南，助你轻松掌握 Next.js 路由的精髓，畅游在页面之间的切换世界中。

Next.js 路由简介

Next.js 路由是一个强大且灵活的工具，它使开发人员能够轻松地在页面之间进行导航。与传统的单页面应用不同，Next.js 路由基于服务器端渲染 (SSR)，这意味着页面是在服务器上预先渲染的，然后才发送到客户端。这种方法带来了许多好处，包括更快的页面加载时间、更好的 SEO 以及更顺畅的用户体验。

Pages Router 版

Pages Router 版是 Next.js 路由的默认版本，它提供了一种简单易用的方式来定义和管理应用程序的路由。与其他路由版本（例如 useRouter钩子）相比，Pages Router 版更加简洁、直接，非常适合小型到中型的应用程序。

入门：创建第一个页面

要使用 Pages Router 版，我们首先需要创建一个新的 Next.js 应用。为此，请运行以下命令：

npx create-next-app my-app --use-npm

接下来，转到项目目录并创建一个名为 pages/about.js 的新文件。此文件将包含我们的关于页面：

import { useRouter} from 'next/router';

export default function AboutPage() {
  const router = useRouter();

  return (
    <div>
      <h1>关于我们</h1>
      <p>欢迎来到我们的关于页面！</p>
      <button onClick={() => router.push('/')}>返回主页</button>
    </div>
  )
}

现在，当我们运行 npm run dev 并导航到 http://localhost:3000/about 时，将会看到我们的关于页面。

动态路由

Next.js 路由还支持动态路由，这使我们能够创建基于 URL 中参数的页面。例如，我们可以创建以下动态路由：

pages/blog/[slug].js

此路由将匹配类似 http://localhost:3000/blog/my-post 的 URL。在 [slug].js 文件中，我们可以访问 slug 参数：

import { useRouter} from 'next/router';

export default function BlogPostPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>博客文章：{slug}</h1>
      <p>正文...</p>
    </div>
  )
}