编辑“︁Next.js页面概念”︁（章节）

= Next.js页面概念 =

== 介绍 ==
在Next.js中，'''页面（Pages）'''是应用的核心构建块。每个页面都对应一个路由，并自动与文件名关联。Next.js使用基于文件系统的路由，这意味着在<code>pages</code>目录中创建的文件会自动成为可访问的路由。例如，<code>pages/about.js</code>会映射到路由<code>/about</code>。

Next.js页面可以是：
* '''静态页面'''：预渲染的HTML内容。
* '''动态页面'''：根据请求动态生成内容。
* '''混合页面'''：结合静态生成（SSG）和服务器端渲染（SSR）。

== 页面文件结构 ==
Next.js的页面必须放置在<code>pages</code>目录中。以下是一个典型的Next.js项目结构：

<syntaxhighlight lang="bash">
pages/
├── index.js        # 对应路由 `/`
├── about.js        # 对应路由 `/about`
├── blog/
│   ├── index.js    # 对应路由 `/blog`
│   └── [slug].js   # 动态路由，如 `/blog/hello-world`
└── _app.js         # 自定义App组件
</syntaxhighlight>

== 基本页面示例 ==
以下是一个简单的Next.js页面示例：

<syntaxhighlight lang="javascript">
// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>欢迎来到Next.js!</h1>
      <p>这是一个基础页面示例。</p>
    </div>
  );
}
</syntaxhighlight>

当访问根路由<code>/</code>时，会渲染此组件。

== 动态路由 ==
Next.js支持动态路由，允许根据参数动态生成页面。动态路由的文件名需用方括号<code>[]</code>包裹。

<syntaxhighlight lang="javascript">
// pages/blog/[slug].js
export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

// 在构建时获取数据
export async function getStaticProps({ params }) {
  const post = await fetchPostBySlug(params.slug); // 假设的API调用
  return { props: { post } };
}

// 指定动态路由的所有可能路径
export async function getStaticPaths() {
  const posts = await fetchAllPosts(); // 假设的API调用
  const paths = posts.map(post => ({ params: { slug: post.slug } }));
  return { paths, fallback: false };
}
</syntaxhighlight>

访问<code>/blog/hello-world</code>时，Next.js会动态渲染对应的博客文章。

== 预渲染策略 ==
Next.js支持两种预渲染方式：

1. '''静态生成（Static Generation）'''：页面在构建时生成，适合内容不频繁变化的页面。
2. '''服务器端渲染（Server-side Rendering）'''：页面在每次请求时生成，适合内容频繁变化或需要用户特定数据的页面。

以下是一个使用SSR的示例：

<syntaxhighlight lang="javascript">
// pages/user/[id].js
export default function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const user = await fetchUser(params.id); // 假设的API调用
  return { props: { user } };
}
</syntaxhighlight>

== 页面生命周期 ==
Next.js页面的生命周期可以通过以下图表表示：

<mermaid>
graph TD
    A[请求页面] --> B{预渲染方式}
    B -->|静态生成| C[构建时生成HTML]
    B -->|服务器端渲染| D[请求时生成HTML]
    C --> E[返回静态HTML]
    D --> E
    E --> F[客户端Hydration]
    F --> G[交互式页面]
</mermaid>

== 实际应用场景 ==
以下是一些Next.js页面的实际应用场景：
1. '''营销页面'''：使用静态生成提高加载速度。
2. '''用户仪表盘'''：使用服务器端渲染确保数据最新。
3. '''电子商务产品页'''：结合静态生成（产品详情）和动态路由（产品ID）。

== 数学公式（可选） ==
如果需要计算页面渲染效率，可以使用以下公式：

<math>
E = \frac{T_{\text{static}} \times N_{\text{static}} + T_{\text{dynamic}} \times N_{\text{dynamic}}}{N_{\text{total}}}
</math>

其中：
* <math>E</math>是平均渲染效率
* <math>T_{\text{static}}</math>是静态生成时间
* <math>N_{\text{static}}</math>是静态页面数量
* <math>T_{\text{dynamic}}</math>是动态生成时间
* <math>N_{\text{dynamic}}</math>是动态页面数量

== 总结 ==
Next.js的页面概念是其路由和渲染系统的核心。通过文件系统路由、动态路由和灵活的预渲染策略，开发者可以构建高效、可扩展的Web应用。理解这些概念是掌握Next.js的关键第一步。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]