Next.js 独立开发教程（二）：从零构建仪表盘应用

更多有关Next.js教程，请查阅

【目录】Next.js 独立开发系列教程-CSDN博客

有兴趣的可以蹲个后续，我会陆续发布一系列的文章。

这个Next.js的入门教程算是告一段落，接下来，会是分章节的Next.js要点讲解，以及基于Next.js拓展的文章，例如：SEO、社交化营销、商业化布局等等。

Anyway，我会以建设独立开发能力为目标，精选一些实用的技术和非技术的内容跟大家分享。

---

目录

更多有关Next.js教程，请查阅

引言

1. 创建项目并设置开发环境

1.1 项目初始化

1.2 启动开发服务器

2. 创建仪表盘页面

2.1 创建页面结构

2.2 配置全局布局和导航

3. 添加 API 端点

3.1 API 路由概述

3.2 在前端使用 API

4. 使用动态路由实现详细页面

4.1 创建动态页面

5. 优化与发布

5.1 使用 ISR 增量静态生成

5.2 部署

6. 结语

系列文章目录

---

---

引言

Next.js 是一个基于 React 的开源框架，以其独特的 SSR（服务端渲染）和 SSG（静态生成）功能受到了广泛欢迎。官方教程中的仪表盘应用构建教程，为开发者提供了如何在 Next.js 中构建一个功能齐全的、现代化的仪表盘应用的完整指南。本教程将通过分析仪表盘应用的开发步骤，为您详细讲解 Next.js 的基本特性和最佳实践。

1. 创建项目并设置开发环境

1.1 项目初始化

首先，确保已安装 Node.js 和 npm（或 Yarn）作为项目的环境支持。我们将通过以下命令快速初始化一个 Next.js 项目：

npx create-next-app@latest dashboard-app

该命令会创建一个名为 dashboard-app 的 Next.js 项目，并自动生成必要的文件和目录结构。根据项目需要选择 TypeScript 或 JavaScript 版本。运行安装命令后，目录结构如下：

dashboard-app/ 
├── pages/ 
├── public/ 
├── styles/ 
├── .gitignore 
├── package.json 
└── README.md

/app：包含你的应用的所有路由、组件和逻辑，这将是你主要工作的地方。

/app/lib：包含在你的应用中使用的功能，例如可重用的实用工具函数和数据获取函数。

/app/ui：包含你的应用的所有UI组件，例如卡片、表格和表单。为了节省时间，我们已经为你预样式化了这些组件。

/public：包含你的应用的所有静态资产，例如图片。

配置文件：你还会注意到在应用的根目录下有如next.config.js这样的配置文件。当你使用create-next-app开始一个新项目时，这些文件中的大多数都会被创建并预配置。在这个课程中，你不需要修改它们。

1.2 启动开发服务器

进入项目目录并运行开发服务器：

cd dashboard-app npm run dev

访问 http://localhost:3000，可以看到 Next.js 提供的默认页面。此页面显示了 Next.js 项目的基本信息，为我们提供了开始构建应用的基础。

2. 创建仪表盘页面

2.1 创建页面结构

在 Next.js 中，每个页面都通过 pages 目录下的文件定义。我们将创建一个新的 dashboard 页面：

touch pages/dashboard.js

在