跳到主要内容

Next.js 页面概念

介绍​

在 Next.js 中，页面（Page） 是构建应用的核心概念之一。每个页面都是一个 React 组件，它们与特定的路由相关联。Next.js 通过文件系统自动生成路由，这意味着你只需在 pages 目录下创建文件，Next.js 就会为你处理路由。

本文将详细介绍 Next.js 页面的基本概念，包括如何创建页面、使用动态路由以及页面在应用中的作用。

创建页面​

在 Next.js 中，页面是放置在 pages 目录下的 React 组件。每个文件的路径决定了页面的 URL。例如：

  • pages/index.js 对应根路径 /
  • pages/about.js 对应 /about
  • pages/blog/first-post.js 对应 /blog/first-post

示例：创建一个简单的页面​

让我们从创建一个简单的页面开始。在 pages/index.js 文件中，添加以下代码：

jsx
export default function Home() {
  return <h1>欢迎来到我的 Next.js 网站！</h1>;
}

当你访问 / 时，Next.js 会自动渲染这个组件，并显示 "欢迎来到我的 Next.js 网站！"。

备注

注意：每个页面组件必须默认导出一个 React 组件。这是 Next.js 识别页面的方式。

动态路由​

Next.js 支持动态路由，这意味着你可以创建根据 URL 参数动态生成的页面。动态路由的文件名需要用方括号 [] 包裹。

示例：创建一个动态路由页面​

假设你想创建一个博客系统，每篇文章的 URL 根据文章的 ID 动态生成。你可以在 pages/blog/[id].js 中创建一个动态路由页面：

jsx
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>博客文章 ID: {id}</h1>;
}

当你访问 /blog/123 时，页面会显示 "博客文章 ID: 123"。

提示

提示：useRouter 是 Next.js 提供的一个钩子，用于访问路由信息，包括查询参数。

页面在 Next.js 中的作用​

页面是 Next.js 应用的核心组成部分。它们不仅负责渲染 UI，还可以通过 getStaticProps、getServerSideProps 和 getStaticPaths 等函数实现数据获取和预渲染。

示例：使用 getStaticProps 预渲染页面​

假设你想在构建时获取数据并预渲染页面，可以使用 getStaticProps：

jsx
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

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

  return {
    props: {
      posts,
    },
  };
}

在这个例子中，getStaticProps 在构建时获取数据，并将 posts 作为 props 传递给页面组件。

警告

注意：getStaticProps 只在构建时运行，因此它适用于静态内容或变化不频繁的数据。

实际应用场景​

Next.js 页面概念在实际应用中有许多用途，例如：

  1. 博客系统：通过动态路由为每篇文章生成唯一的 URL。
  2. 电子商务网站：为每个产品页面生成动态路由，并根据产品 ID 获取数据。
  3. 用户仪表盘：根据用户 ID 动态生成个人资料页面。

示例：电子商务网站的产品页面​

假设你正在构建一个电子商务网站，你可以为每个产品创建一个动态路由页面：

jsx
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  // 假设你从 API 获取产品信息
  const product = {
    id: id,
    name: `产品 ${id}`,
    price: 99.99,
  };

  return (
    <div>
      <h1>{product.name}</h1>
      <p>价格: ${product.price}</p>
    </div>
  );
}

当你访问 /product/123 时，页面会显示 "产品 123" 和价格信息。

总结​

Next.js 的页面概念是构建现代 Web 应用的基础。通过文件系统路由和动态路由，你可以轻松创建复杂的应用结构。页面不仅负责渲染 UI，还可以通过数据获取函数实现预渲染和服务器端渲染。

提示

练习：尝试创建一个包含多个页面的 Next.js 应用，并使用动态路由为每个页面生成唯一的内容。

附加资源​