Next.js 独立开发教程 (五)：创建布局和页面

原创

已于 2024-12-07 21:22:24 修改

· 1.6k 阅读

9 ·

版权

文章标签：

#前端框架 #javascript #前端 #开发语言 #ecmascript

于 2024-11-24 10:04:03 首次发布

1. Next.js 文件路由系统简介

Next.js 的文件路由系统基于项目中的 `pages` 目录：

每个文件自动成为一个路由。
文件名对应于 URL 路径。
支持动态路由和嵌套路由。

例如：

pages/index.js 对应 `/` 路由。
pages/dashboard.js 对应 `/dashboard` 路由。
嵌套文件夹 `pages/admin/settings.js` 对应 `/admin/settings` 路由。

以下将详细介绍页面和布局的构建方法，并在仪表盘应用中应用这些知识。

2. 创建页面：构建仪表盘模块

2.1 创建基础页面

在 `pages` 目录中添加一个 `dashboard.js` 文件，用于定义仪表盘页面：

// pages/dashboard.js
export default function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <p>欢迎来到仪表盘页面！</p>
    </div>
  );
}

启动开发服务器后访问 `/dashboard`，即可看到仪表盘页面。

2.2 使用内置的 `Link` 组件实现导航

Next.js 提供了内置的 `Link` 组件用于在页面间导航，无需刷新页面（客户端渲染）。在主页中添加导航链接到仪表盘页面：

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <Link href="/dashboard">前往仪表盘</Link>
    </div>
  );
}

3. 动态路由：实现用户详情页面

动态路由允许创建带参数的页面。例如，在仪表盘应用中，我们希望每个用户都有独立的详情页面。实现方法如下：

3.1 创建动态路由文件

在 `pages/dashboard` 目录中添加 `[id].js` 文件：

// pages/dashboard/[id].js
import { useRouter } from 'next/router';

export default function UserDetail() {
  const router = useRouter();
  const { id } = router.query; // 获取动态路由参数

  return (
    <div>
      <h1>用户详情</h1>
      <p>当前用户 ID：{id}</p>
    </div>
  );
}

访问 `/dashboard/1` 会显示 ID 为 1 的用户详情。

3.2 动态路由导航

在仪表盘页面中，为每个用户添加导航链接：

// pages/dashboard.js
import Link from 'next/link';

const user

最低0.47元/天解锁文章