在本章节中，我们将深入探讨 Next.js 中页面的基本概念、创建方法以及相关配置。我们将从基础的页面结构开始，逐步深入到动态路由和页面优化等方面。
页面的基本结构
Next.js 的页面由一组文件组成，这些文件存储在项目的 pages 目录下。每个文件对应一个特定的 URL 路径。例如，pages/index.js 文件对应的是网站的根路径（/），而 pages/about.js 文件则对应 /about 路径。
示例：创建一个简单的页面
假设我们要创建一个简单的“关于我们”的页面，步骤如下：
在
pages目录下创建一个新的文件about.js。在该文件中添加以下代码：
-- -------------------- ---- ------- -- -------------- ------ ------- -------- ------- - ------ - ----- ------------- ---------------- ------ -- -启动开发服务器并访问
http://localhost:3000/about，即可看到我们创建的页面。
动态路由
动态路由允许我们在页面之间传递参数，并根据这些参数显示不同的内容。动态路由通过在文件名中使用方括号来定义，例如 [id].js。
示例：动态路由
假设我们需要创建一个展示用户信息的页面，可以根据用户的 ID 来显示不同的用户详情。步骤如下：
在
pages目录下创建一个新的文件users/[id].js。在该文件中添加以下代码：
-- -------------------- ---- ------- -- ------------------- ------ - --------- - ---- -------------- ------ ------- -------- ------ - ----- ------ - ------------ ----- - -- - - ------------- ------ - ----- ------------- -------- -------- ------ -- -启动开发服务器并访问
http://localhost:3000/users/123，可以看到用户 ID 显示为 123。
静态生成与服务器端渲染
Next.js 支持多种页面渲染模式，包括静态生成（Static Generation）和服务器端渲染（Server-side Rendering）。这两种模式可以帮助我们根据应用的需求选择最适合的渲染方式。
静态生成
静态生成适用于那些内容不会经常改变的页面。在这种模式下，Next.js 会在构建时生成静态 HTML 文件。
示例：静态生成页面
假设我们需要创建一个博客列表页面，内容很少变化。我们可以这样设置：
-- -------------------- ---- -------
-- -------------
------ ----- -------- ---------------- -
----- --- - ----- ---------------------------------------
----- ---- - ----- -----------
------ -
------ -
------ -----
--
--
-
------ ------- -------- ------ ----- -- -
------ -
-----
-------------
----
----------------- -- -
--- -------------------------------
---
-----
------
--
-服务器端渲染
服务器端渲染适用于那些内容需要根据请求动态生成的页面。在这种模式下，Next.js 会在每次请求时重新渲染页面。
示例：服务器端渲染页面
假设我们需要创建一个展示天气预报的页面，内容会根据用户的位置实时更新。我们可以这样设置：
-- -------------------- ---- -------
-- ----------------
------ - ---------- -------- - ---- --------
------ ------- -------- --------- -
----- ------ -------- - ---------------
------------ -- -
-----------------------------------------------------------------------------
----------- -- -----------
------------ -- ---------------
-- ----
-- ------- ------ ------------------
------ -
-----
-------------
-------- ---------------------------
------
--
-自定义页面布局
在 Next.js 中，我们可以通过创建自定义布局组件来复用页面的布局设计。这有助于提高代码的可维护性和一致性。
示例：创建自定义布局
假设我们需要创建一个包含导航栏和页脚的通用布局。步骤如下：
创建一个名为
components/Layout.js的新文件，并添加以下代码：-- -------------------- ---- ------- -- -------------------- ------ ------ ---- ----------- ------ ------ ---- ----------- ----- ------ - -- -------- -- -- - ----- ------- -- ----------------------- ------- -- ------ -- ------ ------- -------在需要使用该布局的页面中导入并使用它。例如，在
pages/index.js中：-- -------------------- ---- ------- -- -------------- ------ ------ ---- ----------------------- ------ ------- -------- ------ - ------ - -------- ----- ----------- ----------------- ------ --------- -- -
通过以上介绍，你应该对 Next.js 中的页面有了全面的理解。接下来，你可以根据实际需求来创建和优化你的页面了。