首页
学习
活动
专区
圈层
工具
发布

Gatsby还是Next.js,微言码道官网折腾事记

考虑都到了2022新的一年了,就想着对它再折腾一下,周末我也调研了next.js以及tailwind css等朋友推荐的不错的前端技术,但最终没有采纳。...升级Material UI至最新的MUI 5 微言码道官网的UI是选择的Material UI,一个非常好的React UI框架,与antd design相比,它更适合TO C互联网及移动设备,而antd...我的myddd starter的UI也是基于Material UI的。 Material UI最近升级到了MUI,一个重新品牌命名的全新版本。...但问题是tailwind css全是原子化的css,没有成套的组件,这意味着诸如弹出框,进度条等可能要自己写或网上找第三方,这非常不方便。而MUI则有一整套组件可供使用。...所以,在尝试与权衡后,决定仍然使用了Gatsby+MUI的搭配。 永不停止的折腾 当然,微言码道的官网不会就折腾到此为止。对它的折腾仍然是永不停止的。 而我最迫切想折腾的其实是UI。

2.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    聊一聊 2024 年 React 生态系统

    Vite 不仅支持多种库(如 React)与TypeScript 的结合使用,还具备出色的性能。...2023年,Next.js 引入了新的功能——React Server Components,这一功能将 React 组件从客户端迁移到了服务端,从而实现了重大的范式转变。...可以选择在组件内部使用 useState/useReducer Hook 进行协同定位,或者将它们与 useContext Hook 结合进行全局管理。...这些库已经准备了许多预先构建的组件,并且它们都遵循相同的设计原则、功能性和无障碍性标准: Ant Design Material UI(MUI):在自由职业项目中最受欢迎。...例如,使用react-table-library 可以在 React 中创建功能强大的表格组件,同时它还提供各种主题(如Material UI),能够轻松地与UI库集成。

    2.5K10

    精读《2021 前端新秀回顾》

    这和 next.js 所在的明星公司 Vercel 有关,这家公司挖了大量开源知名人物,包括 Svelte 作者与 React 团队核心成员,所以也许未来社区的新玩具会先用在 next.js 再独立开源...但唯一一个好处是框架无关,即利用 svelte 编译的组件几乎没有额外运行时框架代码,可以最低成本,最大隔离性的与其他项目结合。...第二名 nest 和 next.js 很像,据我当时的了解,是因为 next.js 起步较慢,源码还不支持 ts,所以就有了这个更时髦的新框架。...第三名 Headless UI 是一个完全无样式的基础组件库,支持 React 与 Vue,官网的例子都是利用 Tailwind CSS 内置样式组合而成的。...第三名 MUI 就是大名鼎鼎的 material design UI 组件库,我对它影响最深的是按钮点击后出现的水波纹,这是 material design 的一大特色。

    1.7K40

    JavaScript 框架生态系统的最新动态!

    更重要的是,App Router 使得使用 Next.js 的新功能(如共享布局、嵌套路由)以及新的 React APIs(例如 React 服务器组件、Suspense 和 Sever Actions...近期,Svelte 发布了 SvelteKit 2 ,它包括多种改进,如采用 Vite 5、支持浅层路由和引入图像组件的新特性。...图像组件集成了你所期望的图像组件特性,但我认为最酷的方面是,即使你不使用 Svelte ,也能够利用它 — Svelte 图像组件可在任何基于 Vite 的项目中使用。...其专注于性能和开发者体验,下面是 Astro 近期发布的几个令人兴奋的功能和更新: Astro Islands:Astro Islands 允许开发人员构建与页面其余部分隔离的交互式 UI 组件,这样可以实现高效更新和最佳性能...混合渲染:Astro 现在支持混合渲染,结合静态站点生成和服务器端渲染的优势,提高了灵活性。 图片和图片组件:新的图片和图片组件,简化了图像处理并提供自动优化。

    99410

    为什么Next.js 13会改变游戏规则?

    Next.js 13有什么新内容? Next.js 13 是首个全面尝试整合 React 的两个身份 —— UI 库和架构的版本。那么,它有哪些新特性呢?...Next.js 13包括更新的文件路由与新目录。可选的应用程序目录引入了一个新的布局结构以及一些新的功能和改进。 由于新的路由机制,目录结构发生了微小的变化。...结合服务器和客户端组件,你可以将服务器组件用于程序的快速加载、非交互式部分,而将客户端组件用于交互、浏览器API和其他功能。...在使用async组件时,我们可以使用async & await的Promises来渲染系统。 当从外部服务或API请求数据并返回一个Promise时,我们将组件声明为同步,并等待响应。...其他升级 next/image Next.js中的新图像组件包括更少的客户端 JavaScript、样式和配置,并改进了可访问性。

    3.1K30

    自己做点小项目,前端怎么选?

    最近,Rich 新推出了 SvelteKit,是 svelte 下的开发框架(可以认为是 sapper 的下一代)。...svelte + tailwind 缺一套成熟的 UI 库;next.js 主业是静态网站生成。...我曾经尝试过一些 UI framework,如 element UI / material-ui,不知是文档的问题,还是我们八字不合,总之,我都是浅尝辄止,无法深入下去。...quasar 的安装,配置,以及组件库的使用都还算容易。我跟着一个 youtube 视频一小时做了个简单的 twitter,最大的感受是 quasar 的文档太给力了!...因为 quasar 使用了 material UI 且提供了非常丰富的组件,所以,你几乎不需要考虑 UX 的问题,需要什么界面,找现成的组件,稍稍改变其参数即可。

    2.6K20

    前端月趋势榜:3 月最流行的 20 个前端开源项目 - 0403

    组件化 创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。...一次学习,随处编写 无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。...9. material-ui 快速构建漂亮的 React 应用程序。 Material-UI 是一个简单且可自定义的组件库,用于构建更快,更美观,更易于访问的 React 应用程序。...https://github.com/mui-org/material-ui 10. tailwindcss 一个实用程序优先的 CSS 框架,用于快速构建自定义用户界面。...和 Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目 ,你会找到 Vue 的学习宝藏库。

    3.1K30

    前端月趋势榜:3 月最流行的 20 个前端开源项目

    组件化 创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。...一次学习,随处编写 无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。...9. material-ui 快速构建漂亮的 React 应用程序。 Material-UI 是一个简单且可自定义的组件库,用于构建更快,更美观,更易于访问的 React 应用程序。...https://github.com/mui-org/material-ui 10. tailwindcss 一个实用程序优先的 CSS 框架,用于快速构建自定义用户界面。...一套企业级 UI 设计语言和 React 组件库。 ✨ 特性 ? 提炼自企业级中后台产品的交互语言和视觉风格。 ? 开箱即用的高质量 React 组件。 ?

    3.2K20

    Next.js 14:虽无新 API,但不乏重大变更

    ,与动态个性化响应的灵活性相结合。...部分已弃用的元数据选项将被新选项取代,以进一步推动改造效果。 教育和社区 Next.js 的全新免费课程现已发布,涵盖从样式、字体与图像优化到数据库设置、错误处理等广泛主题。...Future) Sam 讨论了 Next.js 如何实现 React 的未来愿景,而且特别关注了如何将服务器组件与 Server Actions 服务器操作集成至 Next.js 当中。...对话涉及 App Router 如何通过服务器组件与异地数据获,以及将 Sanity Studio 直接嵌入 Next.js 应用程序的方式来提高使用体验。...通过将 PartyKit 与 Next.js 相结合,她演示了如何创建一款功能全面的实时民意调查应用,用户可以与之交互并查看代码和部署过程。

    73320

    Spectron: 谷歌的新模型将语音识别与语言模型结合进行端到端的训练

    Spectron是谷歌Research和Verily AI开发的新的模型。与传统的语言模型不同,Spectron直接处理频谱图作为输入和输出。该模型消除归纳偏差,增强表征保真度,提高音频生成质量。...传统上,像GPT-3这样的LLM依赖于深度学习架构,在大量文本数据集上进行预训练,使他们能够掌握人类语言的复杂性,并生成与上下文相关且连贯的文本。...整个系统是端到端训练的,直接在频谱图上操作,这个方法的关键是只有一个训练目标,使用配对的语音-文本对来联合监督语音识别、文本延续和语音合成,从而在单个解码通道内实现“跨模态” Spectron作为一个转录和生成文本中间媒介...该模型擅长于捕获有关信号形状的更丰富、更远距离的信息,并利用这些信息通过谱图回归与真值的高阶时间和特征delta相匹配。 Spectron架构的突破性在于双重应用,它可以解码中间文本和频谱图。...Spectron的引入代表了人工智能领域的重大飞跃。其独特的处理频谱图的方法为改善语音合成和理解开辟了新的可能性。

    46120

    聊一聊如何在Next.js项目中集成AI模型

    在现代Web开发领域,将人工智能(AI)模型与Next.js结合,已经成为一种革命性的方法。...这篇文章将探索Next.js与OpenAI及其他AI技术结合的巨大潜力和变革性优势,为智能、数据驱动的Web应用程序铺平道路。...计算机视觉模型进行图像识别和理解: OpenAI及其他专注于计算机视觉的AI模型可以增强处理图像的Next.js应用程序。...使用以下命令创建一个新的Next.js应用程序: npx create-next-app your-app-name 安装Vercel AI SDK: Vercel AI SDK是一个开源库,旨在帮助开发者在...状态处理: 实现状态管理,以处理AI驱动组件的状态。这确保了Next.js应用程序与集成的AI模型之间的无缝数据流动。

    53010

    React 16 - 生态:UI 库、Next.js、测试、开发调试工具

    # UI 库 # Ant.Design 组件齐全,适合企业场景 # Material UI 样式更加美观,适合 2C 场景 # 选择因素 组件库是否齐全 样式风格是否符合企业业务需求 API 设计是否便捷灵活...技术支持是否完善 开发是否活跃 # Next.js # 同构应用 在服务端执行虚拟 DOM 渲染,此时前端和服务端渲染层是同一套代码 # 创建同构应用 创建 Next.js 应用程序 (opens...new window) 创建页面 页面就是 pages 目录下的一个组件 static 目录映射静态文件 page 具有特殊静态方法 getInitialProps,用于获取页面初始化数据 在页面中使用其他...React 组件 页面也是标准的 node 模块,可以使用其他 React 组件 页面会针对性打包,仅包含其引入的组件 使用 Link 实现同构路由 使用 next/link 定义链接 点击链接时页面不会刷新...使用 prefetch 预加载目标资源 使用 replace 属性替换路由 动态加载页面 import dynamic from 'next/dynamic'; const DynamicComponentWithCustomLoading

    1.7K30

    Next.js在智慧零售门店中的IoT数据可视化方案实战(一)

    Next.js凭借其混合渲染能力和React生态优势,结合三维可视化技术,为智慧零售提供了高效的数据展示解决方案。...本文将深入解析基于Next.js的IoT数据可视化方案设计,涵盖核心实现技术、典型应用场景与性能优化策略。...一、整体方案设计1.1 系统架构设计架构分为三个核心层级:数据采集层:整合门店内RFID标签、摄像头、环境传感器等设备数据数据处理层:通过Next.js API路由实现数据清洗与聚合(使用getServerSideProps...loading: () => , ssr: false // 禁用三维组件的SSR })渲染性能优化:使用React.memo避免无效重渲染。...随着WebGPU的普及和下一代Next.js对React Server Component的深度整合,智慧零售可视化将迎来三个突破方向:物理环境模拟精度提升、预测性分析看板(如基于AI的库存预测)、跨门店数字孪生协同管理

    20530

    日本开发者打造的Hono火了:定义后React时代微框架的轻量未来

    从他 2024 年 10 月发布在 Cloudflare 博客上的声明 来看,对于这个项目,他寄予了厚望: 与 Next.js 框架源于客户端且使用了 React 不同,Hono 试图成为一个源于服务器端的全栈框架...尽管 Wada 将 Hono 与 Next.js 进行了比较,但这就像将自行车与跑车进行比较一样。 Hono 非常轻量级,专注于服务器 / 运行时层(路由、中间件、响应)。...相比之下,Next.js 是一个大型的、非常独特的端到端 React 技术栈。它包括基于文件的路由、服务器组件、数据获取、与 Turbopack 捆绑、图像优化等特性。...根据 Cloudflare 的建议,将 Hono 与 Cloudflare Workers 结合使用是一个有效的全栈解决方案。...Hono 在后 React 世界中的位置 虽然将 Hono 与 Next.js 相提并论有点过于雄心勃勃(特别是考虑到 HonoX 仍在 Alpha 阶段),但 Hono 似乎确实是一个可以表明未来发展方向的指示器

    16010

    2023 React 生态系统,以及我的一些吐槽……

    nextjs Next.js 是一个用于构建 Web 应用程序的框架。 使用 Next.js,你可以使用 React 组件构建用户界面。...路由 react-router React Router 不仅仅是将 URL 与函数或组件匹配:它还涉及构建一个完整的用户界面,该界面与 URL 相对应,因此可能比你习惯的更多概念。...UI 层一起使用 API 端点是预先定义的,包括如何从参数生成查询参数和将响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的 React hooks,为组件提供数据和 isLoading...UI 组件库 Material UI Mantine UI Ant Design Chakra UI Headless UI(Tailwind CSS) DaisyUI(Tailwind CSS) shadcn...最后,我们结合设计稿进行 UI 还原,对编写自定义样式,最终就能实现一个全新数字加减器组件了; 动画 React Spring React Spring 是一个用于构建交互式,数据驱动和动画 UI 组件的库

    1.9K30
    领券