（翻译＋笔记）学习next.js、react官网内容-chapter1 getStart

文档解释

本文是作者在学习react过程中的学习文档，更偏小白一点，英文翻译为个人理解，个别术语翻译可能不够准确，有问题欢迎指正。

• 课程开始前提：先下载node.js 18.17.0版本以上。
• 部分react基础知识需要到react中文网先了解一下，包括react的hook、status、props等。

学习目标：

• 根据next.js官网手册，过一遍官方提供的项目及其对应文档。
• 对文档进行翻译。
• 本节过chapter1。

学习内容：

next.js文档链接：https://nextjs.org/learn/dashboard-app/getting-started

学习产出：

1. 创建新的项目

To create a Next.js app, open your terminal, cd into the folder you’d like to keep your project, and run the following command:
为了创建一个Next.js app。首先打开你的终端，使用命令 cd 你想要保存项目所在的文件夹名字，然后在命令行输入下面给出的命令：
tips： 对于Windows，更方便的是直接去你想要保存项目的文件夹下面或者在你常用的项目保存文件夹下新建一个自定义文件夹，在窗口显示文件夹目录上面点击一下，输入cmd，直接进入到该目录下的命令行界面，然后输入下面的命令，会快速的下载该项目到目录下。

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

This command uses create-next-app, a Command Line Interface (CLI) tool that sets up a Next.js application for you. In the command above, you’re also using the --example flag with the starter example for this course.
这条命令使用了create-next-app 这是一个为你建立一个next.js应用的命令行工具。你也在上面的命令中使用了 --example 选项，后接的地址是这节课程给出的开始例子项目地址。

2. 探索课程

Unlike tutorials that have you write code from scratch, much of the code for this course is already written for you. This better reflects real-world development, where you’ll likely be working with existing codebases.
不像那些让你从头开始写代码的教程，本课程的多数代码都已经为你写好了。这个更好地反应了真实开发，在真实开发中你会很可能使用已经存在的代码库。

英语part：
tutorials: 教程，指南；
scratch：本意就是抓、擦、起跑线；
from scratch译为从头开始，白手起家

Our goal is to help you focus on learning the main features of Next.js, without having to write all the application code.
我们的目标是帮助你聚焦到学习next.js的主要特点上面，而不需要必须去写所有的应用代码
After installation, open the project in your code editor and navigate to nextjs-dashboard.
在下载完成之后，用你的代码编辑器打开这个项目并且打开项目的导航栏。

//本条语句是进入到下载的项目下，
//项目名称是nextjs-dashboard
//Windows直接用代码编辑器，推荐vscode（免费）或者webstorm
cd nextjs-dashboard

Let’s spend some time exploring the project.
让我们开始探索项目。

文件组织结构

You’ll notice that the project has the following folder structure:
你将会注意到项目有如下的文件结构：

• /app: Contains all the routes, components, and logic for your application, this is where you’ll be mostly working from.
  包含所有的路由、组件和你的项目的逻辑，这个文件下将会是你未来主要工作的地方。
• /app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
  包含你项目应用中使用到的函数，例如 reusable utility（重复使用效用？）和data fetching（数据抓取）函数。（react 函数称之为组件或许更合适？）
• /app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we’ve pre-styled these components for you.
  包含所有的项目的UI组件，例如表格、表单等。为了节省时间，我们以及预设好了这些组件style样式。
• /public: Contains all the static assets for your application, such as images.
  包含所有的项目的静态资源，例如图片。
• /scripts: Contains a seeding script that you’ll use to populate your database in a later chapter.
  包含一个种子设定脚本，您将在后面的章节中使用该脚本填充数据库。
• Config Files: You’ll also notice config files such as next.config.js at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app. You will not need to modify them in this course.
  你还会注意到应用根目录中的配置文件，例如 next.config.js。这些文件大多数是在使用 create-next-app 创建新项目时被创建和预配置的。在本课程中，您无需修改它们。(有关配置就在这里更改）
  Feel free to explore these folders, and don’t worry if you don’t understand everything the code is doing yet.
  自由探索这些文件夹，如果不理解代码正在做什么的任意程序部分都不要担心。（仅仅去到处看看各部分，熟悉一下框架，后面要详细学呢，现在担心什么呢？）

placeholder data

When you’re building user interfaces, it helps to have some placeholder data. If a database or API is not yet available, you can:
当建立用户接口时，placeholder data（占位符？）会有帮助。如果数据库或者API还没有实现，你可以：

• Use placeholder data in JSON format or as JavaScript objects.
• **翻译：**使用JSON格式或者JavaScript objects格式的占位符。
• Use a 3rd party service like mockAPI.
• **翻译：**使用第三方服务工具，例如mockAPI(postman、ApiPost都可以，目的是模仿后端送来的数据，以便前端可以调用该数据进行模拟调试。)

For this project, we’ve provided some placeholder data in app/lib/placeholder-data.js. Each JavaScript object in the file represents a table in your database. For example, for the invoices table:
在这个项目中，我们已经在app/lib/placeholder-data.js文件中提供了一些mock数据。每个文件中的JavaScript对象代表了你数据库中的一份表格。例如，在表格invoices中：

//在项目的app/lib/placeholder-data.js文件中
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',
  },
  // ...
];

In the chapter on setting up your database, you’ll use this data to seed your database (populate it with some initial data).
在setting up your database（设置你自己的数据库）章节中，你将会使用这些数据来初始化你的数据库。

TypeScript

You may also notice most files have a .ts or .tsx suffix. This is because the project is written in TypeScript. We wanted to create a course that reflects the modern web landscape.
你可能也注意到了大多数的文件有着.ts或者.tsx这两种后缀名。这是因为项目是用TypeScript 写的。我们希望创造一个反映现代web真实景象（或者说真实前端web构建的创建使用情形）的课程。（ps:这样可以让所学直接用在实际开发，而非产学分离）

It’s okay if you don’t know TypeScript - we’ll provide the TypeScript code snippets when required.
如果你不知道TypeScript也完全没有问题-当需要时候我们将会提供TypeScript 代码片段。

For now, take a look at the /app/lib/definitions.ts file. Here, we manually define the types that will be returned from the database. For example, the invoices table has the following types:
至于现在，看看 /app/lib/definitions.ts file这个文件吧。在这儿，我们手工地定义了数据库将被返回的类型。例如invoices表格有如下的类型：

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // 对下面status的类型解释：在TypeScript中，这个叫做字符串联合类型
  //In TypeScript, this is called a string union type.
  //这意味着"status"属性只能是在下面这两个字符串'pending'或者'paid'中任选其一，其他任何字符或者类型均不可。
  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
  //可以类比与Java的枚举类型。
  status: 'pending' | 'paid';
};

By using TypeScript, you can ensure you don’t accidentally pass the wrong data format to your components or database, like passing a string instead of a number to invoice amount.
通过使用TypeScript，你可以确保你不会意外地传递错误的数据格式到你的组件或者数据库，例如invoice的 amount是在上面被定义为number类型，这样你就不会错误地将字符串类型误传成number类型到amount（因为编译时候会报错，提醒你参数传递错误）。

运行服务

Run npm i to install the project’s packages.
运行命令npm i来下载项目需要的包。

npm i

Followed by npm run dev to start the development server.
然后运行 npm run dev 来开启服务，运行项目。

npm run dev

tips：以上两条命令既可以在windows+r输入cmd输入enter之后进入到cmd.exe模式下，进入到项目所在目录下，逐条输入执行；也可以在用代码编辑器vscode的终端terminal下逐条输入执行，重要的不是打开终端的地点而是要打开命令行能够在项目目录下执行命令
如果在vscode终端使用npm命令时，报错如下：

npm : 无法加载文件 D：\ProgramFiles\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?Link
ID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ npm i
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

那么，解决方法：

  1.  在终端输入 `get-ExecutionPolicy` 查看执行策略/权限；
  2.  **输出**--->  Restricted(受限制的)；
  3.  终端输入`Set-ExecutionPolicy -Scope CurrentUser`命令给用户赋予权限；
  4.  输入`RemoteSigned`；
  5.  终端输入`get-ExecutionPolicy`查看一下权限，显示RemoteSigned就可以了。 

npm run dev starts your Next.js development server on port 3000. Let’s check to see if it’s working. Open http://localhost:3000
on your browser. Your home page should look like this:
npm run dev 命令默认在端口3000上面开始你的Next.js开发服务。来检查一下他是否生效。在你的任意一款浏览器上打开本地地址，你的主界面应当看起来是这样，如下：
命令行成功界面：
网址访问成功界面：关闭服务，直接在终端焦点聚焦（就是你鼠标点入终端后）直接按住CTRL+C就可以退出。

最后

如果有问题，终端面板会报错，请按照报错信息按需搜索，即使看不懂英文也没有关系，开始坚持背单词吧，多看多查多练，你一定会在这条路上走得又远又好的! 加油