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.rhkb.cn/news/156006.html

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

相关文章

课题学习(六)----安装误差校准、实验方法

一、 安装误差校准 1.1 数学模型 在实际情况下,即使努力尝试使三轴加速度计和三轴磁通门正交,也不可能保证坐标轴的正交和安装的准确居中。无论采用何种解法,都会导致最终解的误差。因此,要想提高测量精度,就必须开发…

验收测试的关键步骤您知道吗

验收测试是软件开发生命周期中的重要环节,用于验证项目交付是否符合用户需求和质量标准。本文将介绍验收测试的定义及实施验收测试的关键步骤。 一、验收测试的定义和目标 确保项目交付质量:通过主动验证和评估软件系统的功能、性能和质量,确…

轻量级虚拟化技术草稿

Support Tech ST.1 virtiofs ST.1.1 fuse framework 引用wiki中关于fuse的定义: Filesystem in Userspace (FUSE) is a software interface for Unix and Unix-like computer operating systems that lets non-privileged users create their own file systems w…

Java中在循环体内拼接字符串时为什么使用StringBuilder而不是String

在循环体内拼接字符串时为什么使用StringBuilder而不是String 在《阿里巴巴Java开发手册》一书中提到了: 循环体内,字符串的连接方式,请使用 StringBuilder 的 append 方法进行扩展。(而不要用String的方式) 说明&…

31 数据分析(中)numpy介绍

文章目录 工具excelTableauPower Queryjupytermatplotlibnumpy安装导入包快速掌握(bushi)array和list的相互转化 np的range多维数组的属性array的改变形状array升降维度array内元素的类型数和array的运算array之间的加减法认识轴切片条件与逻辑修改值app…

系统韧性研究(1)| 何谓「系统韧性」?

过去十年,系统韧性作为一个关键问题被广泛讨论,在数据中心和云计算方面尤甚,同时它对赛博物理系统也至关重要,尽管该术语在该领域不太常用。大伙都希望自己的系统具有韧性,但这到底意味着什么?韧性与其他质…

气象台卫星监测vr交互教学增强学生的学习兴趣和动力

对地观测是以地球为研究对象,依托卫星、飞船等光电仪器,进行各种探测活动,其核心是遥感技术,因此为了让遥感专业学员能提前熟悉对地观测规则、流程、方法及注意事项,借助VR虚拟现实制作的三维仿真场景,能让…

【PX4】解决Resource not found: px4问题【踩坑实录】

【PX4】解决Resource not found: px4问题【踩坑实录】 文章目录 【PX4】解决Resource not found: px4问题【踩坑实录】1. 问题描述2. 错误排查 1. 问题描述 笔者在配置好px4的所有环境后,使用自己写的launch文件时,出现了报错 sjhsjhR9000X:~$ roslaunc…

spring 注入 当有两个参数的时候 接上面

新加一个int 型的 age 记得写getset方法和构造方法 ((((((( 构造方法的作用——无论是有参构造还是无参构造,他的作用都是为了方便为对象的属性初始化值 构造方法是一种特殊的方…

【C++14算法】make_unique

文章目录 前言一、make_unique函数1.1 什么是make_unique?1.2 如何使用make_unique?1.3 make_unique的函数原型如下:1.4 示例代码示例1: 创建一个动态分配的整数对象示例2: 创建一个动态分配的自定义类型对象示例3: 创建一个动态分配的数组对象示例4: 创建一个动态…

[ROS2系列] ubuntu 20.04测试rtabmap 3D建图(二)

接上文我们继续 如果我们要在仿真环境中进行测试&#xff0c;需要将摄像头配置成功。 一、配置位置 sudo vim /opt/ros/foxy/share/turtlebot3_gazebo/models/turtlebot3_waffle/model.sdf 二、修改 <joint name"camera_rgb_optical_joint" type"fixed&…

YOLOv5算法改进(3)— 注意力机制介绍(ECA、SOCA和SimAM)

前言:Hello大家好,我是小哥谈。注意力机制是近年来深度学习领域内的研究热点,可以帮助模型更好地关注重要的特征,从而提高模型的性能。注意力机制可被应用于模型的不同层级,以便更好地捕捉图像中的细节和特征,这种模型在计算资源有限的情况下,可以实现更好的性能和效率。…

解决 Git:This is not a valid source path/URL

由于sourcetree 可以获取不同仓库的代码&#xff0c;而我的用户名密码比较杂乱&#xff0c;导致经常会修改密码&#xff0c;在新建拉去仓库代码的时候sourcetree 不会提示你密码错误&#xff0c;直接提示 This is not a valid source path/URL。 在已存在的代码仓库&#xff0…

怎么把heic改成jpg?方法大全在这里

怎么把heic改成jpg&#xff1f;HEIC是一种现代的图像文件格式。它是由ISO制定的标准&#xff0c;并得到了苹果公司的支持和推广。与JPG等传统图像格式相比&#xff0c;HEIC格式可以提供更好的图像质量&#xff0c;并且占用更少的存储空间。这使得它在手机、平板电脑和其他移动设…

wps演示时图片任意位置拖动

wps演示时图片任意位置拖动 1.wps11.1版本&#xff0c;其他版本的宏插件可以自己下载。2.先确认自己的wps版本是不是11.13.检查是否有图像工具4.检查文件格式和安全5.开发工具--图像6.选中图像控件&#xff0c;右击选择查看代码&#xff0c;将原有代码删除&#xff0c;将下边代…

竞赛选题 深度学习 植物识别算法系统

文章目录 0 前言2 相关技术2.1 VGG-Net模型2.2 VGG-Net在植物识别的优势(1) 卷积核&#xff0c;池化核大小固定(2) 特征提取更全面(3) 网络训练误差收敛速度较快 3 VGG-Net的搭建3.1 Tornado简介(1) 优势(2) 关键代码 4 Inception V3 神经网络4.1 网络结构 5 开始训练5.1 数据集…

【知网检索会议】第三届教育,语言与艺术国际学术会议(ICELA 2023)

第三届教育&#xff0c;语言与艺术国际学术会议(ICELA 2023) The 3rd International Conference on Education, Language and Art 第三届教育&#xff0c;语言与艺术国际学术会议&#xff08;ICELA 2023&#xff09;将于2023年11月17-19日在中国北京召开。会议主要围绕会议主…

ubuntu mmdetection配置

mmdetection配置最重要的是版本匹配&#xff0c;特别是cuda&#xff0c;torch与mmcv-full 本项目以mmdetection v2.28.2为例介绍 1.查看显卡算力 因为gpu的算力需要与Pytorch依赖的CUDA算力匹配&#xff0c;低版本GPU可在相对高的CUDA版本下运行&#xff0c;相反则不行 算力…

MFC为“对话框中的控件添加变量”,QT中使用“ui.对象名称”来调用控件

MFC中使用 向导 可以为“对话框中的控件添加变量”&#xff1b; 但是在QT中&#xff0c;一般都是使用“ui.对象名称”来调用控件&#xff01; 1、MFC中为“对话框中的控件添加变量”&#xff1b; 1.1 因为编辑框中的数据可能会经常变化&#xff0c;所以需要它们每个控件关联个…

京东商品数据:8月京东环境电器行业数据分析

8月份&#xff0c;环境电器大盘市场整体下滑。鲸参谋数据显示&#xff0c;8月京东平台环境电器的大盘将近570万&#xff0c;环比下滑约29%&#xff0c;同比下滑约10%&#xff1b;销售额为25亿&#xff0c;环比下滑约23%&#xff0c;同比下滑约8%。 *数据源于鲸参谋-行业趋势分析…