Next.js-浅层路由

简介

Next.js 是一款基于 React 的轻量级应用框架，提供了非常好用的服务端渲染和静态页面生成功能。

浅层路由是 Next.js 中的一种路由类型，它是指没有子路由的普通路由，主要用于渲染单一页面或者处理简单的表单提交等操作。相比深层路由，浅层路由更加简单明了，容易上手。下面，我们就来介绍一下 Next.js 中如何使用浅层路由。

用法

创建浅层路由

首先，我们需要在 pages 目录下创建一个新的页面，比如说我们创建一个名为 about.js 的页面。这个页面只需要简单地返回一个 React 组件即可：

export default function AboutPage() {
  return <h1>About Page</h1>;
}

然后，我们就可以通过浏览器访问 http://localhost:3000/about 来查看这个页面了。

动态路由

浅层路由还支持动态路由，即可以根据页面参数动态生成内容。比如说，我们可以创建一个名为 [id].js 的页面，它可以接受一个 id 参数，并根据这个参数渲染出不同的内容。代码如下：

export default function PostPage({ id }) {
  return <h1>Post {id}</h1>;
}

export async function getStaticPaths() {
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return { props: { id: params.id } };
}

上面代码中，我们先是定义了一个 PostPage 组件，它接受一个 id 参数用于渲染内容。然后，在页面组件外部，我们使用了 getStaticPaths 和 getStaticProps 两个函数。这两个函数是 Next.js 中的静态生成相关的 API，具体作用如下：

• getStaticPaths：用于指定所有可能的动态路由参数，框架会根据这些参数生成对应的静态页面。
• getStaticProps：用于从服务端获取数据，并将数据注入到组件的 props 属性中。

使用这两个函数，我们可以在服务端预生成所有可能的动态路由页面，并且将数据预先注入到每个页面中。这样，在用户请求页面时，就可以直接从预生成的页面中返回 HTML 内容，无需再次获取数据。

结语

浅层路由是 Next.js 中非常常用的一种路由类型，通过上面的介绍，相信大家已经对这个特性有了一定的了解。如果想要深入学习 Next.js，推荐大家参考官方文档。