nextjs构建服务端渲染,同时使用Material UI进行项目配置

一、创建一个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项目就搭建完毕了。开始你的炫酷旅程吧!

相关推荐
千码君20165 天前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
前端OnTheRun11 天前
React18学习笔记(四) 路由案例--记账本
react·router
whltaoin13 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
PyAIGCMaster18 天前
我的项目开发的一般流程,供交流
react·nextjs
aesthetician19 天前
ReactFlow:构建交互式节点流程图的完全指南
前端·流程图·react
fcm1920 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
知识分享小能手21 天前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react
知识分享小能手22 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
知识分享小能手1 个月前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
lypzcgf1 个月前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台