开始吧

创建一个nextjs项目

npm install -g pnpm

然后安装nextjs，并通过create-nextjs-app命令来创建一个模板；

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

项目结构

完成之后，进入到新创建的文件夹中，我们可以看到有如下结构：

• /app: 包含了应用的所有路由、组件和逻辑，你大部分的工作都会在这里进行。
• /app/lib: 包含在应用程序中使用的功能，例如可重用的工具函数和数据获取函数。
• /app/ui: 包含了应用程序中的所有 UI 组件，比如卡片、表格和表单。
• /public: 包含应用程序的所有静态资源，例如图片。
• Config Files: 配置文件，如 next.config.ts 。大多数这些文件在你使用 create-next-app 新建项目时会被创建并预配置好。

占位数据

一个新的项目会有一些占位数据(预制的默认数据)，方便我们进行前期的调试；在设置数据库章节中，我们将使用这些数据来初始化数据库（为其填充一些初始数据）。

[!code] /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文件。TypeScript 是 JavaScript 的一个“超集”（Superset），它为 JavaScript 增加了静态类型系统。

.ts文件

• .ts 文件就是标准的 TypeScript 文件。它包含了 JavaScript 的所有语法，并增加了类型注解。
• 核心思想： 在你写代码的时候就定义好变量、函数参数和返回值的类型，而不是等到代码运行时才发现类型错误。类似于其他后端语言的枚举类;

在 Next.js 项目中，.ts 文件通常用于：

• 工具函数/纯逻辑： 任何不包含 UI 界面的代码，比如日期格式化、数据计算等。
• API 请求逻辑： 封装 fetch 请求，与后端 API 交互的函数。
• 类型定义： 单独存放数据模型的类型定义，比如一个用户的结构。

[!code] /app/lib/definitions.ts

export type Invoice = {
 id: string;             // id: 字符串类型
 customer_id: string;    // 客户id： 字符串类型
 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'; // 状态：两种可选
};

.tsx文件

• .tsx 文件：带 JSX 的 TypeScript；.tsx 文件是 TypeScript 和 JSX 的结合体。"x" 代表 JSX。
• 核心思想： 当你的 TypeScript 文件中需要包含类似 HTML 的 JSX 语法来描述 UI 组件时，你就必须使用 .tsx 后缀。

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

在 Next.js 项目中，.tsx 文件几乎用于所有与 UI 相关的地方：

• 页面文件： app/dashboard/page.tsx
• 布局文件： app/layout.tsx
• 可复用的 UI 组件： components/Button.tsx, components/Card.tsx
• 任何你需要返回 HTML 结构的地方。

运行项目

pnpm i

pnpm dev

• pnpm dev 会在 3000 端口启动 Next.js 开发服务器。命令行输出如下，我们可以打开 http://localhost:3000网页查看；

❯ pnpm dev
> @ dev nextjs-dashboard
> next dev --turbopack

   ▲ Next.js 15.3.2 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.3.118:3000

 ✓ Starting...
 ✓ Ready in 5.4s
 ○ Compiling / ...
 ✓ Compiled / in 1712ms
 GET / 200 in 2307ms
 GET / 200 in 56ms