本章进行基础项目框架的搭建,使用到的技术点包括
- 基础框架: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
最终的项目结构: