章节1

入门

创建一个新项目

我们推荐使用 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，这是一个命令行界面（CLI）工具，用于为您设置 Next.js 应用程序。在上面的命令中，您还使用了 --example 标志和本课程的入门示例。

探索项目

与从零开始编写代码的教程不同，本课程的大部分代码已为您编写好。这更好地反映了实际开发，您可能会使用现有代码库。

我们的目标是帮助您专注于学习 Next.js 的主要功能，而无需编写*所有*应用程序代码。

安装后，在您的代码编辑器中打开项目并导航到 nextjs-dashboard。

cd nextjs-dashboard

让我们花一些时间探索项目。

文件夹结构

您会注意到项目具有以下文件夹结构：

Folder structure of the dashboard project, showing the main folders and files: app, public, and config files.

/app：包含应用程序的所有路由、组件和逻辑，这是您主要工作的地方。
/app/lib：包含应用程序中使用的函数，例如可重用工具函数和数据获取函数。
/app/ui：包含应用程序的所有 UI 组件，例如卡片、表格和表单。为了节省时间，我们已经为您预设了这些组件的样式。
/public：包含应用程序的所有静态资产，例如图像。
配置文件：您还会注意到应用程序根目录下的配置文件，例如 next.config.ts。这些文件中的大部分是在您使用 create-next-app 启动新项目时创建和预配置的。在本课程中，您无需修改它们。

您可以随意探索这些文件夹，即使您还不完全理解所有代码的功能也无需担心。

占位符数据

在构建用户界面时，拥有一些占位符数据会有所帮助。如果数据库或 API 尚未可用，您可以：

使用 JSON 格式或 JavaScript 对象形式的占位符数据。
使用第三方服务，例如 mockAPI。

对于本项目，我们提供了 app/lib/placeholder-data.ts 中的一些占位符数据。文件中的每个 JavaScript 对象代表数据库中的一个表。例如，对于发票表：

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 代码片段。

现在，看一下 /app/lib/definitions.ts 文件。在这里，我们手动定义了将从数据库返回的类型。例如，发票表具有以下类型：

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // In TypeScript, this is called a string union type.
  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
  status: 'pending' | 'paid';
};

通过使用 TypeScript，您可以确保不会意外地将错误的数据格式传递给组件或数据库，例如将 string 传递给发票 amount 而不是 number。

如果您是 TypeScript 开发人员：

我们手动声明了数据类型，但为了更好的类型安全性，我们推荐使用 Prisma 或 Drizzle，它们根据您的数据库模式自动生成类型。

Next.js 会检测您的项目是否使用 TypeScript，并自动安装必要的包和配置。Next.js 还为您的代码编辑器提供了 TypeScript 插件，以帮助实现自动完成和类型安全。

运行开发服务器

运行 pnpm i 安装项目包。

pnpm i

然后运行 pnpm dev 启动开发服务器。

pnpm dev

pnpm dev 在端口 3000 上启动 Next.js 开发服务器。让我们检查它是否正常工作。

在浏览器中打开 https://:3000。您的主页应该像这样，它是故意未添加样式的：

Unstyled page with the title 'Acme', a description, and login link.