这是我参与「第五届青训营 」伴学笔记创作活动的第15天

创建新的 Next.js 应用程序

自动安装设置

如果使用的是Windows，推荐下载Git并用Git bash来运行命令。 一般使用create-next-app来自动创建新的Next.js文件，会自动设置所需要的文件。

一开始使用cd命令跳转到想要创建项目的目录， 之后创建项目，运行以下代码：

npx create-next-app@latest
#or
yarn create next-app

如果想要使用 TypeScript 开发项目，通过 --typescript 参数创建 TypeScript 项目：

npx create-next-app@latest --typescript
#or
yarn create next-app --typescript

安装完成后，

• 运行 npm run dev 或 yarn dev 来启动开发服务器，访问地址为 http://localhost:3000。
• 通过 http://localhost:3000 地址访问你的应用程序。
• 编辑 pages/index.js 文件并在浏览器中查看更新。

手动安装设置：

再跳转到相应目录后，安装next、react 和 react-dom ：

npm install next react react-dom
# or
yarn add next react react-dom

之后打开package.json文件并添加script配置：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

这些脚本涉及开发应用程序的不同阶段：

• dev： 运行 next dev，以开发模式启动 Next.js
• build： 运行 next build，以构建用于生产环境的应用程序
• start： 运行 next start，以启动 Next.js 生产环境服务器
• lint： 运行 next lint，以设置 Next.js 的内置 ESLint 配置

Next.js 是围绕着 页面（pages）的概念构造的。一个页面（page）就是一个从 pages 目录下的 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件。

在你的项目中创建一个 pages 目录。

为 ./pages/index.js 文件填充如下内容：

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

到目前为止，我们得到了：

• 自动编译和打包（利用 webpack 和 babel）
• React 快速刷新
• ./pages/ 中的 静态生成和服务器端渲染
• 静态文件服务./public/ 被映射到 /

任何 Next.js 应用程序一开始就是完备的，可以进行生产。