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

一、创建一个next项目

使用create-next-app来启动一个新的Next.js应用,它会自动为你设置好一切

运行命令:

npx create-next-app@latest

执行结果如下: 

 启动项目:

pnpm dev

执行结果: 

启动成功! 

二、安装Material UI依赖

根据Material UI官网介绍,截至2021年底,样式组件与服务器渲染的材质UI项目不兼容。这是因为babel-plugin风格的组件不能与@mui包中的styled()实用程序一起工作。有关详细信息,请参阅此GitHub问题。我们强烈建议在SSR项目中使用Emotion。

运行命令:

pnpm add @mui/material @emotion/styled @emotion/react @emotion/cache @mui/icons-material

 三、使用prettier美化项目代码

安装prettier相关依赖,及其文件配置

运行命令:

pnpm add prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks -D

prettier文件配置.prettierrc.json

{"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相关依赖:

运行命令:

pnpm  add @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript -D

eslint文件.eslintrc.json配置:

{"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。
运行如下命令安装插件:

pnpm add -D prettier-plugin-tailwindcss

prettier文件配置.prettierrc.json:

{"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进行,样式的编写:

pnpm add sass -D

至此,一个使用Material UI组件,使用eslint、Prettier进行规范、美化代码的next项目就搭建完毕了。开始你的炫酷旅程吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Demo29单词规律

/**给定一种规律 pattern 和一个字符串 s ,判断 s 是否遵循相同的规律。这里的 遵循 指完全匹配,例如, pattern 里的每个字母和字符串 s 中的每个非空单词之间存在着双向连接的对应规律。示例1:输入: pattern "abba", s "do…

使用 Python 中的小波变换信号驾驭股票价格的波动

一、简介 股票上涨和下跌,创造出像海浪一样难以预测的模式和走势。然而,就像科学家通过了解下面的水流来预测波浪的运动一样,我们也可以使用类似的工具破译股票市场的一些模式。 通过利用小波变换的力量,我们深入表面,试图揭示驱动股价的深层原因。这段旅程不仅仅涉及数字…

C语言中常用的字符串处理函数(strlen、strcpy、strcat、strcmp)

文章目录 写在前面1. strlen1.1 函数介绍1.2 模拟实现 2. strcpy2.1 函数介绍2.2 模拟实现 3. strcat3.1 函数介绍3.2 模拟实现 4. strcmp4.1 函数介绍4.2 模拟实现 写在前面 本篇文章介绍了C语言中常用的字符串处理函数,包括strlen、strcpy、strcat和strcmp。文章…

【vue3+ts】项目初始化

1、winr呼出cmd,输入构建命令 //用vite构建 npm init vitelatest//用cli脚手架构建 npm init vurlatest2、设置vscode插件 搜索volar,安装前面两个 如果安装了vue2的插件vetur,要禁用掉,否则插件会冲突

Vue-2.6Vue异步更新和$nextTick

Vue是异步更新DOM,为了提升性能。 同步更新类似于刷新,更新一个内容要把所有的内容都刷新一遍。而异步则只刷新更新或修改的部分,不重新将所有内容全部刷新一遍。异步可以减少服务器的压力和等待时间。 $nextTick:等DOM更新后,立刻执行此方…

WebStorm 自定义创建Vue2.0的模板

打开 WebStorm&#xff0c;选择 File --> Settings&#xff1b;在左侧菜单中选择 File and Code Templates&#xff1b;在右侧窗口中&#xff0c;选择 Vue Single File Component&#xff1b;在 Code 标签下&#xff0c;替换默认的代码段为以下代码&#xff1a; <templa…

使用react-router-dom在新标签页打开链接,而不是本页跳转

一般单页面应用&#xff0c;当你使用useNavigate时候的时候&#xff0c;用useNavigate来跳转&#xff0c;只能是在当前页面刷新跳转的&#xff0c;要想单独在一个tab页打开新页面&#xff0c;大概用三种方式。 第一种 使用link标签&#xff0c;配合target实现 <Link to&q…

2023年中国石油催化裂化剂行业供需、竞争格局及市场规模分析[图]

催化裂化是石油炼制过程之一&#xff0c;是在热和催化剂的作用下使重质油发生裂化反应&#xff0c;转变为裂化气、汽油和柴油等的过程。中国原油加工量在这一阶段逐年提升&#xff0c;2022年国内原油加工量67589.7万吨。 2016-2022年中国原油加工量情况 资料来源&#xff1a;国…

linux,write:xxx has messages disabled 与 Ubuntu多用户同时登录的问题 ubuntu 20.04

write&#xff1a;xxx has messages disabled 问题 被这问题折磨了好久&#xff0c;搜都搜不到&#xff0c;还是灵机一动想到的。 很多 帖子说&#xff0c;要使用 mesg y用了还是没有用&#xff0c;后面我登录了很多用户&#xff0c;发现只有root用户可以给别的用户使用write…

el-data-picker限制日期可选范围

<el-date-pickerclass"date"v-model"date"type"date"change"dateChange"value-format"yyyy-MM-dd"format"yyyy-MM-dd"placeholder"选择日期":picker-options"datePickerOptions"></…

LCR 078. 合并 K 个升序链表

LCR 078. 合并 K 个升序链表 题目链接&#xff1a;LCR 078. 合并 K 个升序链表 代码如下&#xff1a; class Solution { public:ListNode* mergeKLists(vector<ListNode*>& lists) {ListNode *lsnullptr;for(int i0;i<lists.size();i){lsmergeList(ls,lists[i])…

【重拾C语言】八、表单数据组织——结构体(类型、类型别名、直接/间接访问;典例:复数、成绩单)

目录 前言 八、结构体 8.1 结构体类型 8.2 结构体类型名 8.2.1 typedef关键字 8.2.1 结构体类型别名 8.3 结构体变量 8.3.1 使用结构体类型引用 8.3.2 使用结构体类型定义 8.3.3 使用typedef定义的结构体类型别名 8.4 访问结构体变量 8.4.1 直接成员选择表达式 8.…

JOSEF约瑟 矿用一般型选择性漏电继电器 LXY2-660 Φ45 JKY1-660

系列型号&#xff1a; JY82A检漏继电器 JY82B检漏继电器 JY82-380/660检漏继电器 JY82-IV检漏继电器 JY82-2P检漏继电器 JY82-2/3检漏继电器 JJKY检漏继电器 JD型检漏继电器 JY82-IV;JY82J JY82-II;JY82-III JY82-1P;JY82-2PA;JY82-2PB JJB-380;JJB-380/660 JD-12…

uni-app 实现考勤打卡功能

一、在页面中引入地图组件 <map id"map" style"width: 100%; height: 100%" :latitude"myLatitude" :longitude"myLongitude" :circles"circles" :markers"markers"> </map>属性名类型说明longitudeN…

python 实现MA指标

交易中均线是非常常用的指标&#xff0c;有指标终于均线的说法&#xff0c;利用均线指标可以构造更多基于价格的指标。目前广大的交易者多用python打造自已的相关交易工具&#xff0c;下面是我利用python产现的MA指标计算代码&#xff1a; def read_ma(self, stock_dat, *windo…

VRRP 虚拟路由器冗余协议的解析和配置

VRRP的解析 个人简介 原理和HSRP的差不多&#xff0c;少了一些状态就只有了三种状态 还有不同的就是VRRP严格按照抢占要求 一个VRRP组中具有最高优先级的设备成为Master路由器缺省优先级为100若优先级相同&#xff0c;具有最高接口IP地址最大的路由器成为Master路由器抢占(Pr…

Centos指令合集

2023-10-09 防火墙 开启 systemctl start firewalld自启动 systemctl enable firewalld.service关闭 systemctl stop firewalld禁用 systemctl disable firewalld.service查看状态 systemctl status firewalld

【前端】sortable.js Vue 数组数据更新问题 数据跟页面不同步 深度复制

先用一个数据深拷贝数据&#xff0c;这里使用了 slice 方法&#xff0c;然后置空&#xff0c;最后在 $nextTick 中赋值深拷贝出来的数组值。最后可以了。 猜测是vue没有检测到arr改变 解决方案 增加唯一不变的key 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲…

360测试开发技术面试题目

最近面试了360测试开发的职位&#xff0c;将面试题整理出来分享~ 一、java方面 1、java重载和重写的区别 重载overloading 多个方法、相同的名字&#xff0c;不同的参数 重写overwrite 子类继承父类&#xff0c;对方法进行重写 2、java封装的特性 可以改变内部实现&#xff0c;…

Python与CAD系列基础篇(三)创建二三维多段线、圆弧、椭圆弧、样条曲线

目录 0 简述1 二三维多段线2 圆弧3 椭圆弧4 样条曲线0 简述 本篇详细介绍使用①通过pyautocad连接AutoCAD进行处理②通过ezdxf处理dxf格式文件创建和编辑多段线、圆弧、椭圆弧和样条曲线的方法。 1 二三维多段线 pyautocad方式 分别创建二维和三维多段线: from pyautocad …