基础框架搭建
创建目录
项目顶层文件夹
$ mkdir /share-explorer
Next.js 文件夹
$ mkdir /share-explorer/explorer
Node.js 文件夹
$ mkdir /share-explorer/explorer-manager
安装 Node.js
使用 nvm 管理 Node.js
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
//or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
安装 Node.js
$ nvm install 20
查看 node 版本
$ node -v
v20.0.0
安装 pnpm
$ npm i pnpm -g
配置加速源
$ touch /share-explorer/.npmrc
$ echo "registry = https://registry.npmmirror.com/" > /share-explorer/.npmrc
初始化跟项目 package.json 文件
进入项目根目录
$ cd /share-explorer
初始化 package.json 文件
$ npm init -y
Wrote to /share-explorer/package.json:
{
"name": "share-explorer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
初始化 Next.js
进入 Next.js 目录
$ cd /share-explorer/explorer
初始化 Next.js
$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) y
✔ What is your project named? … explorer
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No
Creating a new Next.js app in /share-explorer/explorer.
Using npm.
Initializing project with template: app
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
删除 npm 安装的 node_modules 目录。后续使用 pnpm 进行依赖管理
$ rm -rf /share-explorer/explorer/node_modules
初始化 explorer-mamager
$ cd /share-explorer/explorer-manager
初始化 npm package.json
$ npm init -y
配置 workspace
配置 package.json
将 explorer 、explorer-manager加入 package.json 文件内的 workspace 字段内。使用 npm run -w 执行对应的 script
{
...
"workspace": ["explorer", "explorer-manager"],
"license": "ISC"
}
配置 pnpm-workspace.yaml
将 explorer 、explorer-manager 加入 pnpm 的 workspace 内。执行 pnpm i 时依赖管理
$ touch /share-explorer/pnpm-workspace.yaml
添加下面内容
packages:
- "explorer"
- "explorer-manager"
使用 pnpm 安装 Next.js 依赖
$ pnpm i
启动 Next.js
$ pnpm run -C explorer dev
//or
$ npm run dev -w explorer
特殊情况
$ npm run -w explorer dev
> explorer@0.1.0 dev
> next dev▲ Next.js 14.0.4
- Local: http://localhost:3000
npm ERR! code ENOWORKSPACES
npm ERR! This command does not support workspaces.npm ERR! A complete log of this run can be found in: /***/.npm/_logs/2023-12-11T03_15_46_413Z-debug-0.log
✓ Ready in 6.3s
报错时可执行下面语句，关闭 Next.js 的检测
$ ./explorer/node_modules/.bin/next telemetry disable
Your preference has been saved to /***/Library/Preferences/nextjs-nodejs/config.json.
Status: Disabled
You have opted-out of Next.js' anonymous telemetry program.
No data will be collected from your machine.
Learn more: https://nextjs.org/telemetry
初始化开发规范
如果有需要，可添加 prettier 配置文件 .prettierrc
需要在项目内一同安装 prettier。
$ pnpm i prettier -D -w
// or
$ pnpm i prettier -g
结束
Next.js 基础框架搭建完毕。
下一步将进行文件夹视图的的呈现。
