从零开始-文件资源管理器-01- Next.js 基础框架搭建

基础框架搭建

创建目录

项目顶层文件夹

$ 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

参考链接

初始化开发规范

编码规范文件 .editorconfig

.git过滤文件 .gitignore

如果有需要，可添加 prettier 配置文件 .prettierrc
需要在项目内一同安装 prettier。

$ pnpm i prettier -D -w
// or
$ pnpm i prettier -g

结束

Next.js 基础框架搭建完毕。

下一步将进行文件夹视图的的呈现。

git-repo

yangWs29/share-explorer