Next.js+Typescript+Yarn 构建服务端渲染项目（1）

本章进行基础项目框架的搭建，使用到的技术点包括

• 基础框架：Next.js（一个轻量级的 React 服务端渲染应用框架）
• 构建工具：Yarn
• Typescript
• 后面我们会再了解eslint等工具的引入
• github项目地址

1. 创建项目目录

 1. mkdir next-ts
 2. cd next-ts
 3. yarn  init -y

完成以上三步之后你已经创建了一个 【next-ts】目录，该目录下会有一个最基础的package.json文件，我们后续的操作皆基于该目录和该package.json来进行

2. 添加nextjs等基础依赖

 1. yarn add react react next

{
     
  "name": "next-ts",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
     
    "next": "^9.1.6",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

以上为创建后的package.json内容

3. 添加typescript等基础插件，配置一个ts的运行环境

 1. yarn add typescript @types/react @types/node

{
     
  "name": "next-ts",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
     
    "@types/node": "^12.12.21",
    "@types/react": "^16.9.16",
    "next": "^9.1.6",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "typescript": "^3.7.3"
  }
}

4. 在package.json中添加项目启动命令并且创建项目启动入口文件

• 编辑package.json，
  插入一下代码片段

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

dev --> yarn dev 本地开发环境调试用（会生成一个 .next 目录作为本地调试的基础环境）；
build --> yarn  build 打包next项目；build之后会在根目录下生成一个  .next 文件夹。该文件夹内是打完包之后的代码；
start --> yarn start build完成之后可以使用 start命令在生产环境运行本项目；

• 根目录下创建pages文件
  了解过next.js的运行原理之后，我们可以知道，next.js项目中我们不需要使用类似react-router之类的路由工具去进行页面路由的定义，./pages作为服务端的渲染和索引会自动生成项目的路由索引。
  比如

pages/index.ts 文件对应的默认路径为 /
pages/home.ts对应的路由路径为 /home

我们在pages目录下创建index.ts文件，然后本地运行 dev环境

const Home = () => <div>hello world</div>;

export default Home;

yarn dev

之后在命令窗口会看到如下的运行结果

ok，一个基础的nextjs + typescript + yarn的项目已经完成搭建了，本地访问路径为 http://localhost:3000
最终的项目结构：