基礎(chǔ)框架搭建
創(chuàng)建目錄
項目頂層文件夾
$ 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 文件
進(jìn)入項目根目錄
$ 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
進(jìn)入 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 目錄。后續(xù)使用 pnpm 進(jìn)行依賴管理
$ 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 文件內(nèi)的 workspace 字段內(nèi)。使用 npm run -w 執(zhí)行對應(yīng)的 script
{
...
"workspace": ["explorer", "explorer-manager"],
"license": "ISC"
}
配置 pnpm-workspace.yaml
將 explorer 、explorer-manager 加入 pnpm 的 workspace 內(nèi)。執(zhí)行 pnpm i 時依賴管理
$ touch /share-explorer/pnpm-workspace.yaml
添加下面內(nèi)容
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
報錯時可執(zhí)行下面語句，關(guān)閉 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
初始化開發(fā)規(guī)范
如果有需要，可添加 prettier 配置文件 .prettierrc
需要在項目內(nèi)一同安裝 prettier。
$ pnpm i prettier -D -w
// or
$ pnpm i prettier -g
結(jié)束
Next.js 基礎(chǔ)框架搭建完畢。
下一步將進(jìn)行文件夾視圖的的呈現(xiàn)。
