Next.js 路由

Next.js 路由

什么是 Next.js 路由

在开发 web 应用程序时，经常需要根据用户的操作加载不同的页面或内容。路由是指导用户在网站上导航的方式，通常涉及页面之间的切换和 URL 的变化。在 Next.js 中，路由是指导用户在应用程序中导航的方法。Next.js 提供了简单且灵活的路由系统，使得在页面之间切换变得非常容易。

基本路由

在 Next.js 中，我们可以使用内置的 Link 组件来创建基本的路由链接。通过 Link 组件，可以实现无需刷新页面的路由导航。以下是一个简单的示例：

import Link from 'next/link';

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>About Page</a>
      </Link>
    </div>
  );
};

export default HomePage;

在这个示例中，我们创建了一个简单的首页组件 HomePage，在页面中使用 Link 组件创建了一个指向 /about 页面的链接。当用户点击这个链接时，Next.js 会处理页面的切换，并加载 /about 页面的内容，而不会刷新整个页面。

动态路由

除了静态路由外，Next.js 还支持动态路由。动态路由允许我们根据不同的参数加载不同的内容。在 Next.js 中，可以使用文件名带有 [param] 的方式来创建动态路由。下面是一个示例：

在 pages 目录下创建一个名为 posts 的目录，在 posts 目录下创建一个名为 [id].js 的文件，内容如下：

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      {post.body}
    </div>
  );
};

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default Post;

在上面的示例中，我们创建了一个动态路由页面 Post，通过获取带有特定 ID 的帖子信息，并展示在页面上。我们使用 getStaticPaths 方法获取所有可能的路径，并通过 getStaticProps 方法获取特定路径下的数据。

嵌套路由

在一些应用程序中，可能会存在嵌套的路由结构，Next.js 也支持嵌套路由。通过在页面组件中使用多个 Page 组件来创建嵌套的路由结构。以下是一个简单示例：

// pages/products/index.js
const ProductsPage = () => {
  return (
    <div>
      <h1>Products Page</h1>
      <Link href="/products/mobile">
        <a>Mobile Phones</a>
      </Link>
      <Link href="/products/laptop">
        <a>Laptops</a>
      </Link>
    </div>
  );
};

export default ProductsPage;

// pages/products/mobile.js
const MobilePage = () => {
  return (
    <div>
      <h1>Mobile Phones Page</h1>
    </div>
  );
};

export default MobilePage;

// pages/products/laptop.js
const LaptopPage = () => {
  return (
    <div>
      <h1>Laptops Page</h1>
    </div>
  );
};

export default LaptopPage;

在这个示例中，我们创建了一个主页面 ProductsPage，并在其中嵌套了两个页面 MobilePage 和 LaptopPage。用户可以通过点击链接导航到不同的子页面，实现了路由的嵌套结构。

404 页面

在开发 web 应用程序时，有时用户访问不存在的页面时需要显示一个友好的 404 页面。在 Next.js 中，可以创建一个特殊的页面 _error.js 来处理 404 页面的展示。示例如下：

const Custom404 = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>Oops! The page you are looking for does not exist.</p>
    </div>
  );
};

export default Custom404;

在上面的示例中，我们创建了一个自定义的 404 页面 Custom404，当用户访问不存在的页面时，Next.js 会显示这个页面。用户将看到友好的页面不存在提示。

API 路由

除了页面路由外，Next.js 还支持 API 路由。API 路由是用来处理数据请求的路由，通常用于获取数据、保存数据等。在 Next.js 中，可以在 pages/api 目录下创建 API 路由文件。以下是一个简单的示例：

在 pages/api 目录下创建一个名为 hello.js 的文件，内容如下：

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

在上面的示例中，我们创建了一个简单的 API 路由，当用户访问 /api/hello 时，会返回一个 JSON 数据 { message: 'Hello World' }。这样就可以方便地处理客户端和服务器端之间的数据交互。

总结

在这篇文章中，我们详细介绍了 Next.js 中的路由功能。通过使用 Next.js 提供的简单而强大的路由系统，我们可以轻松地实现页面之间的切换、动态路由、嵌套路由等功能。同时，Next.js 还支持 API 路由，方便处理与服务器端的数据交互。