一、创建一个next项目
使用create-next-app来启动一个新的Next.js应用,它会自动为你设置好一切
运行命令:
javascript
npx create-next-app@latest
执行结果如下:
启动项目:
javascript
pnpm dev
执行结果:
启动成功!
二、安装Material UI依赖
根据Material UI官网介绍,截至2021年底,样式组件与服务器渲染的材质UI项目不兼容。这是因为babel-plugin风格的组件不能与@mui包中的styled()实用程序一起工作。有关详细信息,请参阅此GitHub问题。我们强烈建议在SSR项目中使用Emotion。
运行命令:
javascript
pnpm add @mui/material @emotion/styled @emotion/react @emotion/cache @mui/icons-material
三、使用prettier美化项目代码
安装prettier相关依赖,及其文件配置
运行命令:
javascript
pnpm add prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks -D
prettier文件配置.prettierrc.json
javascript
{
"semi": true,
"endOfLine": "auto",
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"vueIndentScriptAndStyle": false,
"jsxBracketSameLine:": true,
"htmlWhitespaceSensitivity": "ignore",
"wrapAttributes": true,
"overrides": [
{
"files": "*.html",
"options": {
"parser": "html"
}
}
]
}
安装eslint相关依赖:
运行命令:
javascript
pnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript -D
eslint文件.eslintrc.json配置:
javascript
{
"root": true,
"extends": ["eslint:recommended", "next","prettier"],
"env": {
"es6": true,
"node": true,
"browser": true
},
"parserOptions": {
"ecmaVersion": 12,
"parser": "@typescript-eslint/parser"
},
"plugins": ["prettier", "react-hooks","@typescript-eslint"],
"parser": "@typescript-eslint/parser",
"globals": {
"chrome": true,
"React":true
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"rules": {
"prettier/prettier":"error"
}
}
四、使用Prettier自动排序tailwind CSS类
为了使用Prettier自动排序tailwind CSS类,我们需要安装Prettier -plugin-tailwindcss。
运行如下命令安装插件:
javascript
pnpm add -D prettier-plugin-tailwindcss
prettier文件配置.prettierrc.json:
javascript
{
"semi": true,
"endOfLine": "auto",
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"vueIndentScriptAndStyle": false,
"jsxBracketSameLine:": true,
"htmlWhitespaceSensitivity": "ignore",
"wrapAttributes": true,
"plugins": ["prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.html",
"options": {
"parser": "html"
}
}
]
}
五、安装sass
虽然项目当中已经安装了tailwind css进行样式处理,但是有时候不可避免的需要写点样式.因此,安装sass进行,样式的编写:
javascript
pnpm add sass -D
至此,一个使用Material UI组件,使用eslint、Prettier进行规范、美化代码的next项目就搭建完毕了。开始你的炫酷旅程吧!