在现代 Web 开发的浪潮中，构建高性能、SEO 友好且用户体验流畅的应用程序是我们共同追求的目标。Next.js 作为一个强大的 React 框架，为我们提供了极佳的开发体验。特别是随着最新版本的引入，全新的 App Router 彻底改变了我构建应用的方式，而其中核心的核心，就是那个看似简单却功能强大的 page.js 文件。
你是否曾在项目中纠结于如何优雅地管理路由？或者想过如何在不依赖复杂第三方库的情况下实现动态路由和参数获取？在这篇文章中，我们将摒弃枯燥的理论，像构建真实项目一样，深入探讨 Next.js 中 page.js 的机制。我们将从最基础的概念出发，逐步深入到动态路由、搜索参数处理，以及一些在实际开发中非常实用的技巧和最佳实践。无论你是 Next.js 的初学者，还是希望迁移到 App Router 的资深开发者，这篇指南都将为你提供清晰的路径和实用的见解。
准备工作
为了确保我们能顺利地通过接下来的代码示例，建议你具备以下基础：
- JavaScript/TypeScript 基础：熟悉 ES6+ 语法、箭头函数、解构赋值等。
- React 核心概念：理解组件、Props、JSX 以及函数式组件。
- Next.js 基础：对 Next.js 的基本用途和项目结构有初步了解。
为什么是 page.js？
在早期的 Next.js 版本中，我们习惯于在 INLINECODE07619107 目录下直接创建文件来定义路由。但在 App Router 的架构下，一切都变得更加灵活和模块化。INLINECODEfaf48105 不再仅仅是一个文件，它是路由逻辑的UI 终端。
简单来说，Next.js 通过文件系统来映射路由 URL。INLINECODE468c2594 目录下的每一个文件夹代表一段 URL 路径，而该文件夹下的 INLINECODEc5d00442 文件则决定了当用户访问这段路径时，浏览器具体渲染什么内容。如果没有 page.js，哪怕有文件夹，路由也无法被访问。这种强制性的约定让我们在组织代码时更加清晰。
核心概念：路由与页面的映射
让我们先从最直观的静态路由开始，理解这种映射关系是如何工作的。
#### 静态路由
静态路由是指 URL 路径固定的页面。比如主页、关于页面、联系方式页面等。
创建方式非常简单：
- 在 INLINECODEc88fa233 目录下创建一个文件夹，例如 INLINECODE41b54979。
- 在 INLINECODEe7e338d3 文件夹内创建一个 INLINECODE9c03a81e 文件。
- 在
page.js中导出一个 React 组件。
代码示例：
// src/app/about/page.js
import React from ‘react‘;
// 这是一个标准的 React 函数组件，作为 /about 路由的 UI
export default function AboutPage() {
return (
关于我们
这是使用 Next.js App Router 创建的关于页面。
我们可以看到，URL 路径直接对应了文件夹结构。
);
}
解析：
在这个例子中，文件夹名 INLINECODE3e7b965d 直接成为了 URL 路径 INLINECODEff88ca2b。当你启动开发服务器并访问该地址时，Next.js 会自动查找并渲染这个 page.js 中导出的组件。我们不需要任何额外的配置，也不需要手动引入路由库，这一切都是自动发生的。
进阶实战：动态路由的威力
在实际开发中，我们经常会遇到需要展示类似数据详情的场景，例如展示某个具体用户的资料、某篇具体的博客文章或者是某个商品的详情页。这些页面的 URL 通常包含一个动态的 ID 或 slug，比如 INLINECODE94fdd91f 或 INLINECODE0d57cd87。
这就是动态路由大显身手的地方。
#### 如何创建动态路由？
我们通过在文件夹名称两端加上方括号 INLINECODE05c7ea21 来告诉 Next.js 这是一个动态段。例如，文件夹名命名为 INLINECODE196970d8。
代码示例：
假设我们要构建一个简单的博客文章详情页。
// src/app/posts/[slug]/page.js
import React from ‘react‘;
// Next.js 会将动态参数作为 props 传递给页面组件
export default function PostDetail({ params }) {
// 从 params 中解构出 slug，这对应了文件夹名 [slug]
const { slug } = params;
// 在实际应用中，这里你可以根据 slug 去数据库或 API 获取文章详情
// const postData = await fetchPost(slug);
return (
正在阅读文章：{slug}
这是一个动态路由示例。当前页面的 URL 是由你访问的路径决定的。
当你访问 /posts/hello-world 时，slug 变量的值就是 "hello-world"。
这种机制让我们可以复用同一个组件来渲染成千上万条不同的数据，
而不需要为每一篇文章都创建一个单独的文件。
);
}
工作原理：
- 当用户访问 INLINECODE612021c6 时，Next.js 匹配到 INLINECODE481ab1fe。
- 它捕获 URL 中的
nextjs-tutorial部分。 - 将其作为一个对象 INLINECODEf0a25606 传递给组件的 INLINECODE472652d0 prop。
- 组件读取
params.slug并据此渲染内容。
最佳实践：
在动态页面中，通常我们会结合 generateStaticParams 函数来告诉 Next.js 预先构建哪些静态页面，从而提高性能。但在开发阶段，你可以完全依赖动态渲染来快速迭代。
处理 URL 参数：Search Params
除了路径中的动态参数，我们还经常需要处理 URL 查询字符串，也就是 INLINECODE21c99cb2 后面的内容。例如：INLINECODE7e026c18。
在 page.js 中，获取这些参数非常直观。
代码示例：
// src/app/search/page.js
‘use client‘; // 注意：为了使用交互性（如输入框），我们通常标记为客户端组件
import React, { useState } from ‘react‘;
import { useRouter, useSearchParams } from ‘next/navigation‘;
// 这里演示一种常见模式：虽然服务端组件也能接收 searchParams，
// 但在复杂交互中，我们通常会结合 useSearchParams hook 使用。
// 不过，为了展示 page.js 的原生功能，我们首先看服务端获取的方式。
export default function SearchPage({ searchParams }) {
// searchParams 是一个对象，包含了所有的查询参数
const keyword = searchParams.keyword || ‘未提供‘;
const page = searchParams.page || ‘1‘;
return (
搜索结果页面
当前搜索关键词： {keyword}
我们正在显示第 {page} 页的结果。
);
}
关键点：
searchParamsprop 在服务端组件中是可用的，这意味着你可以在渲染前获取数据并进行 SEO 优化。- 如果 URL 是 INLINECODE9a11808d，INLINECODE530eb2c0 将是
{ category: ‘tech‘ }。 - 这种方式非常适合用于分页、筛选和搜索功能的初始状态渲染。
综合实战：构建一个层级结构
为了巩固我们的理解，让我们做一个稍微复杂的综合练习。我们将构建一个简单的用户仪表盘，包含以下层级：
- 主页 (
app/page.js) - 用户列表 (
app/users/page.js) - 用户详情 (
app/users/[userId]/page.js) - 用户的设置 (
app/users/[userId]/settings/page.js)
这种嵌套结构展示了 Next.js 处理嵌套路由的能力。
#### 1. 项目初始化
首先，确保你已经创建了项目。打开终端并运行：
npx create-next-app@latest my-dashboard
# 根据提示选择配置，建议选择 TypeScript, Tailwind, App Router
#### 2. 用户列表页面
创建 app/users/page.js：
// src/app/users/page.js
import Link from ‘next/link‘;
// 模拟数据
const users = [
{ id: ‘1‘, name: ‘张三‘, role: ‘Admin‘ },
{ id: ‘2‘, name: ‘李四‘, role: ‘Editor‘ },
{ id: ‘3‘, name: ‘王五‘, role: ‘User‘ },
];
export default function UsersPage() {
return (
用户管理列表
{users.map((user) => (
{user.name}
角色: {user.role}
{/* 使用 Next.js 的 Link 组件进行客户端导航 */}
查看详情
|
设置
))}
);
}
#### 3. 用户详情页面 (动态路由)
创建 app/users/[userId]/page.js：
// src/app/users/[userId]/page.js
import Link from ‘next/link‘;
export default function UserDetail({ params }) {
// 在实际项目中，这里可以通过 params.userId 从 API 获取用户数据
// const user = await fetchUser(params.userId);
return (
← 返回列表
用户 ID: {params.userId}
这是一个受保护的路由页面。我们通过 URL 中的 [userId]
动态捕获了用户 ID。
在这个页面中，我们可以展示用户的详细信息、订单历史、活动记录等。
提示：
你也可以访问该用户的设置页面：/users/{params.userId}/settings
);
}
常见陷阱与性能优化建议
在享受 page.js 带来的便利时，有几个地方是我们作为开发者需要特别注意的，这能帮助你避免很多常见的坑。
#### 1. 默认是服务端组件
Next.js 的 INLINECODEb160d7a6 默认导出的是服务端组件。这意味着你不能在组件内部直接使用 INLINECODE2c282925、INLINECODEe8884945 等 React Hooks，也不能使用浏览器的 API（如 INLINECODE8b9a5a6d 对象）。
解决方案： 如果你需要添加客户端交互（如点击事件、状态管理），请在文件顶部添加 ‘use client‘ 指令。或者，更好的做法是，将交互逻辑拆分到子组件中，保持父组件（页面）的纯粹性。
#### 2. 文件夹的命名敏感性
动态路由文件夹必须包含方括号，例如 INLINECODE5c56e318。如果你忘记了括号，Next.js 会将其视为名为 INLINECODE7b3be5f0 的静态文件夹，而不是动态变量，这在调试时非常容易混淆。
#### 3. Layout 的特殊性
注意 INLINECODE13e6088f 和 INLINECODE3311b9b6 的区别。INLINECODEbb7f7ced 是路由的具体内容，而 INLINECODE80327d72 是该路由下多个页面共享的 UI（如导航栏、侧边栏）。不要在 INLINECODE34672f78 中重复写通用的布局代码，利用 INLINECODEeea1cb9e 可以极大提高代码复用率。
#### 4. 图片和资源优化
在 INLINECODE44f23377 中渲染图片时，尽量使用 Next.js 提供的 INLINECODE9f7e8895 组件而不是原生的
总结与展望
经过这一番深入的探索，我们可以看到，page.js 远不止是一个简单的文件。它是 Next.js App Router 架构中的基石，连接了文件系统、URL 路由和 React UI。通过掌握静态路由、动态参数和搜索参数的处理，你已经具备了构建复杂 Web 应用的核心能力。
关键要点回顾：
- 文件即路由：文件夹结构定义了 URL 结构，
page.js定义了页面内容。 - 动态捕获：使用 INLINECODE93e030eb 语法创建动态路由，通过 INLINECODEc3f228c6 访问数据。
- 查询参数：通过
props.searchParams获取 URL 搜索字符串。
接下来，你可以尝试：
- 探索 Server Actions，看看如何在
page.js中直接处理表单提交。 - 学习 Loading UI 和 Error Boundaries，为你的
page.js添加更好的用户体验。 - 尝试将你的组件拆分为更小的单元，并在
layout.js中组合它们。
Next.js 的世界非常广阔，熟练运用 page.js 只是第一步。希望这篇文章能帮助你在构建下一个精彩应用时，更加得心应手！