创建新项目

要创建 Next.js 应用，我们直接打开终端， cd 进入要保留项目的文件夹，然后运行以下命令：

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

这边使用 create-next-app 命令，这是一个命令行界面 （CLI） 工具，可为你设置一个 Next.js 应用程序。

和之前不同的是，在上面的命令中，还使用 --example 标志，直接使用了starter-example的课程示例。

探索项目

与从头开始编写代码的教程不同，本课程的大部分代码已经编写好了。这其实更像实际开发，你会使用现有的代码库。

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

安装后，我们可以直接使用VSCode打开 nextjs-dashboard 目录。

文件夹结构

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

• /app ：包含应用程序的所有路由、组件和逻辑，这是我们主要写代码的地方。
• /app/lib ：包含应用程序中使用的函数，例如可复用的函数。
• /app/ui ：包含应用程序的所有 UI 组件，例如卡片、表格和窗体。
• /public ：包含应用程序的所有静态资源，例如图像。
• /scripts ：包含一个初始设定脚本，我们将在后面的章节中使用该脚本初始化数据库。
• 配置文件：例如 next.config.js 位于应用程序根目录下的配置文件。这些文件中的大多数都是在使用 create-next-app 启动新项目时创建和预配置的。在本课程中，您无需修改它们。

点位符数据

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

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

对于此项目，我们在 app/lib/placeholder-data.js 中提供了一些占位符数据。文件中的每个 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 or .tsx 后缀。这是因为该项目是用 TypeScript 编写的。我们想创建一个反映现代网络环境的课程。

如果你不了解 TypeScript，也没关系 - 我们将在需要时提供 TypeScript 代码片段。

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

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 而不是 number 传递给发票 amount 。

运行开发服务器

运行 npm i 以安装项目的包。

npm i

然后启动 npm run dev 开发服务器。

npm run dev

npm run dev 在端口 3000 上启动Next.js开发服务器。让我们检查一下它是否有效。在浏览器上打开 http://localhost:3000。您的主页应如下所示：