当前位置：首页 > news >正文

Next.js 系统性教学：构建应用的路由与页面管理

news 2024/12/14 0:36:33

1. 什么是 Next.js 路由系统？

Next.js 的路由系统采用文件系统（File-System Routing）的方式。与传统的手动定义路由配置文件不同，Next.js 自动将 pages 目录中的文件映射为应用的路由：

文件名对应于页面路径。
嵌套目录表示嵌套路由。
动态路由通过文件名中的特定语法（如 [id].js）实现。

这种约定优于配置的路由方式极大地简化了开发流程，使得构建现代化 Web 应用更直观和高效。

2. 定义静态路由

在 Next.js 中，静态路由通过在 pages 目录中创建文件实现。每个文件对应一个 URL 路径。

2.1 基本静态路由

示例目录结构：

pages/
├── index.js
├── about.js
├── contact.js

对应的路由：

/ 对应 index.js。
/about 对应 about.js。
/contact 对应 contact.js。

示例代码：pages/about.js

export default function AboutPage() {return (<div><h1>关于我们</h1><p>欢迎访问关于我们页面。</p></div>);
}

访问 /about，即可加载该页面。

2.2 嵌套路由

通过在 pages 目录中创建嵌套文件夹，可以实现嵌套路由。

示例目录结构：

pages/
├── blog/
│   ├── index.js
│   ├── new.js
├── about.js

对应的路由：

/blog 对应 blog/index.js。
/blog/new 对应 blog/new.js。

示例代码：pages/blog/index.js

export default function BlogPage() {return (<div><h1>博客主页</h1><p>欢迎访问我们的博客。</p></div>);
}

示例代码：pages/blog/new.js

export default function NewPostPage() {return (<div><h1>新博客文章</h1><p>撰写您新的博客文章。</p></div>);
}

访问 /blog 或 /blog/new，分别加载对应的页面。

3. 动态路由

动态路由是现代 Web 应用开发中非常重要的一部分，特别是对于电商、博客等需要根据 URL 动态加载内容的应用。

3.1 定义动态路由

动态路由通过在文件名中使用方括号 [] 定义参数。

示例目录结构：

pages/
├── product/
│   ├── [id].js

对应的路由：

/product/[id] 匹配所有以 /product/ 开头的路径，例如 /product/1、/product/abc。

示例代码：pages/product/[id].js

import { useRouter } from "next/router";export default function ProductPage() {const router = useRouter();const { id } = router.query;return (<div><h1>产品详情</h1><p>您正在查看的产品 ID 是：{id}</p></div>);
}

访问 /product/123：

页面将显示 您正在查看的产品 ID 是：123。

3.2 获取动态路由参数

useRouter：提供当前路由信息。
router.query：包含动态参数。

4. 为应用添加页面

Next.js 提供两种方法来创建页面：基于文件系统的传统 pages 目录和新的 app 目录。

4.1 `pages` 目录（传统方法）

默认支持静态与动态路由。
适用于小型项目或快速原型开发。

目录结构：

pages/
├── index.js
├── [dynamic].js

4.2 `app` 目录（模块化方法）

app 目录是 Next.js 新推出的功能，它采用文件夹和文件组合来定义页面及其元数据，支持更细粒度的页面组织。

目录结构：

app/
├── layout.js
├── page.js
├── product/
│   ├── [id]/
│   │   ├── page.js

在 app 中：

每个文件夹代表一个路由。
page.js 是页面的主要入口。
layout.js 是布局文件。

5. 自定义页面元数据与动态路由加载

5.1 添加页面元数据

元数据（如标题、描述等）可以通过 app 目录中的 metadata 属性定义。

示例代码：app/product/[id]/page.js

export const metadata = {title: "产品详情",description: "这是产品详情页面。",
};export default function ProductDetailPage({ params }) {return (<div><h1>产品 ID: {params.id}</h1></div>);
}

6. 客户端与服务端导航

Next.js 提供客户端和服务端两种导航方式：

6.1 使用 `Link` 实现客户端导航

通过 next/link 提供的 Link 组件实现快速导航。

示例：

import Link from "next/link";export default function HomePage() {return (<div><h1>主页</h1><Link href="/about"><a>跳转到关于我们</a></Link></div>);
}

6.2 服务端跳转

通过 router.push 在服务端实现页面跳转。

示例：

import { useRouter } from "next/router";export default function HomePage() {const router = useRouter();const handleNavigate = () => {router.push("/about");};return (<div><h1>主页</h1><button onClick={handleNavigate}>跳转到关于我们</button></div>);
}