创建一个新项目
推荐使用 pnpm 作为你的包管理工具，因为它比 npm 或 yarn 更快、更高效。如果你还没有安装 pnpm，可以通过运行以下命令全局安装：
npm install -g pnpm
要创建一个 Next.js 应用程序，请打开你的终端，进入(cd)你想要保存项目的文件夹，并运行以下命令：
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
该命令使用了 create-next-app，这是一个为你设置 Next.js 应用程序的命令行工具。在上面的命令中还使用了 --example 标志，并选择了本课程的启动示例
关于 create-next-app 可参考此处
运行项目
与从头编写代码的教程不同，本课程的大部分代码已经为你编写好。这更接近于实际的开发工作，在那里你可能会处理现有的代码库。
我们的目标是帮助你专注于学习 Next.js 的主要功能，而不必编写所有的应用代码。
安装完成后，在代码编辑器中打开项目，并导航到 nextjs-dashboard 文件夹。
cd nextjs-dashboard
让我们花点时间深究这个项目。
文件夹结构
你会注意到该项目有以下文件夹结构：
仪表板项目的文件夹结构，显示了主要的文件夹和文件：app，public 和配置文件。
-
/app：包含应用程序的所有路由、组件和逻辑，这是你主要工作的地方。 -
/app/lib：包含应用程序中使用的函数，例如可重用的实用函数和数据获取函数。 -
/app/ui：包含应用程序的所有 UI 组件，例如卡片、表格和表单。为了节省时间，我们已经为你预先设计了这些组件。 -
/public：包含应用程序的所有静态资源，例如图片。 -
Config Files：你还会注意到应用程序根目录下的配置文件，如next.config.js。这些文件大多数是在使用create-next-app启动新项目时创建并预配置的。在本课程中，你不需要修改它们。
如果你暂时还不理解代码的全部功能, 可以随意探索这些文件
占位符数据
在构建用户界面时，使用一些占位符数据会有所帮助。如果数据库或 API 尚未可用，你可以：
- 使用
JSON格式或JavaScript对象作为占位符数据。 - 使用第三方服务如 mockAPI。
对于本项目，我们在 app/lib/placeholder-data.ts 文件中提供了一些占位符数据。文件中的每个 JavaScript 对象都代表数据库中的一张表, 比如 invoices 表：
// /app/lib/placeholder-data.ts const invoices = [ { customer_id: customers[0].id, amount: 15795, status: 'pending', date: '2022-12-06', }, { customer_id: customers[1].id, amount: 20348, status: 'pending', date: '2022-11-14', }, // ... ];
在设置数据库章节中，你将使用这些数据来为你的数据库填充一些初始数据。
TypeScript
你可能还会注意到大多数文件有 .ts 或 .tsx 后缀。这是因为该项目是用 TypeScript 编写的。我们希望创建一个反映现代 Web 发展趋势的课程。
如果你不了解 TypeScript 也没关系——我们将在你在需要时提供 TypeScript的部分
:::tip
若你想学习TypeScript, 还可参考本站 TypeScript教程
:::
现在，先看看 /app/lib/definitions.ts 文件。在这里，我们手动定义了从数据库返回的类型。例如，invoices 表具有以下类型：
/app/lib/definitions.ts
export type Invoice = { id: string; customer_id: string; amount: number; date: string; // 在 TypeScript 中，这称为字符串联合类型。 // 这意味着 "status" 属性只能是两个字符串中的一个：'pending' 或 'paid'。 status: 'pending' | 'paid'; };
通过使用 TypeScript，你可以确保不会意外地将错误的数据格式传递给组件或数据库，例如将字符串传递给 invoice.amount 而不是数字。
如果你是一名 TypeScript 开发者：
- 我们是手动声明数据类型的，但为了更好的类型安全性，我们推荐使用 Prisma 或 Drizzle，这些工具会根据你的数据库架构自动生成类型。
-
Next.js会检测你的项目是否使用了TypeScript，并自动安装所需的包和配置。Next.js 还附带了一个适用于代码编辑器的 TypeScript插件，帮助实现自动补全和类型安全。
运行开发服务器
运行 pnpm i 来安装项目的包。
pnpm i
接下来运行 pnpm dev 来启动开发服务器。
pnpm dev
pnpm dev 会在 3000 端口启动你的 Next.js 开发服务器。让我们检查一下它是否正常工作。
在浏览器中打开 http://localhost:3000。你的主页应看起来像这样，这里是故意未做样式的。
