关于 Next.js 和 Tailwind CSS 🔥

使用 Next.js、Tailwind CSS 和 Framer Motion 三个月后的感受。

简体中文

大家好，距离我上一篇博文已经过去一周了。 Fitur Multiple Reactions.

这次我们不会讨论新功能，而是谈谈在大约三个月后使用Next.js，Tailwind CSS和Framer Motion的感觉。

对，三个月我第一次使用所有这些技术来创建这个网站，该网站将于2022年10月23日左右开始。

一切都始于这条推文。Tweet ini.

我只想说说我的体验。我不会拿它跟其他类似的技术栈做比较，因为我之前没用过别的，呵呵。

直接进入正题吧..

Next.js

之前我用 React 构建网站时比较喜欢用 CRA，最近才开始在这个网站上使用 Next.js。

说实话，Next.js 真的很棒。所有重要的功能 —我需要的功能— 都已提供，用户体验很棒，文档完整，教程切中要点。

最酷的是它支持 SSG 和 SSR。以下是我特别喜欢的一些功能：

路由

这是最重要的部分。它开箱即用地支持路由。创建动态页面（例如博客）非常容易。

我最喜欢的是 API 路由。要创建 API 端点，只需使用已提供的 API 路由即可。因此，无需配置 Express。

MDX 支持

使用 @next/mdx 实现博客的 markdown 或 mdx 非常容易。

您还可以创建常规页面，因此您可以真正以 MDX 格式创建常规页面，或者创建主要包含 '写作'-内容的页面。

优化

Next.js 已对字体和图像的使用进行了优化。

要使用 Google 字体，只需从 @next/font 包导入即可。图像使用已自动支持压缩和 srcset 属性。

还有什么可以改进的呢？

实际上还有许多其他的小功能，例如更快的编译速度、国际化路由、静态 HTML 导出等等。

您可以快速浏览 文档 或直接试用。

Tailwind CSS

请查看以下示例代码 (来自官方网站 tailwindcss.com)，该代码使用 Tailwind CSS 进行样式设置：

<figure class="rounded-xl bg-slate-100 p-8 md:flex md:p-0 dark:bg-slate-800">
  <img
    class="mx-auto h-24 w-24 rounded-full md:h-auto md:w-48 md:rounded-none"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="space-y-4 pt-6 text-center md:p-8 md:text-left">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale on large teams.
        It’s easy to customize, adapts to any design, and the build size is
        tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
HTML
UTF-8

我原本以为是这样:

为什么风格很奇怪？HTML太乱了？如果是这样，为什么不使用这些样式？

我有很多，这就是它。😂

但是，既然你有一个使用Tailwind CSS的自由项目，那么你也应该使用它。

事实证明，使用Tailwind CSS也很好。我尝试和治疗师在建立这个网站。

怎么样？

  • 无需更换文件以创建样式

    标记和样式足够在同一个地方。你需要打开一个CSS文件，指定一个类的名称，清除要编辑的类等。

    这是因为样式粘在HTML中，所以创建或更新组件非常容易和快速。

    只需打开文件，在同一个地方编辑所有内容编辑样式🔥


  • 与inline styles不同

    我最初的想法是错误的，因为它们的风格不同。使用Tailwind CSS，在HTML中，我可以像hover，focus等效果这样的样式。


  • 完全支持CSS

    几乎所有的CSS功能封面都是相同的Tailwind CSS。比如渐变，背景效果，网格，响应式设计（断点）等。

    越来越多的实用类？

    是啊！但如果使用VS Code，它甚至很好，因为它已经提供了VS Code扩展，在那里再次编辑HTML类，将出现Tailwind CSS类实用程序的自动完成列表！


  • 简写工具

    可以使用 class inset-0 来输出CSS：

    .inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

    或者更丰富的 x dan y 用于左+右和上下+下的缩写。 例如， inset-x-0, px-2, border-y-0 等。


  • 支持黑暗模式

    Tailwind CSS 提供了一个名为 (variant) 的实用类。 dark: 它可以用于黑暗模式。

    例如:

    <div class="text-black dark:text-white">Hello, World!</div>

    Tulisan 'Hello, World!' 默认情况下，上面的颜色为黑色，而在暗模式下为白色。


  • CSS输出很小

    由于Tailwind CSS会自动捆绑未使用的实用程序类，因此根据使用多少实用程序，输出很小。


有什么不好吗？当然有

  • 长的Classname

    这在Twitter上也是如此。😂 但我认为使用 clsx() 有点脆弱. 例如:

    <nav
  className={clsx(
    'border-divider-light rounded-xl border bg-white',
    'dark:border-divider-dark dark:bg-slate-900'
  )}
></nav>
    TypeScript React
    UTF-8

  • HTML的负载越来越重

    虽然CSS的输出很小，但HTML的输出更大。因为长的类名肯定会增加HTML的位大小。

    可以回到旧的方式，假设类很多，更不用说重复使用（例如循环）可以使用普通的css类。

    案例示例：

    <div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Home
</div>
<div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Projects
</div>
<div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Blog
</div>
    HTML
    UTF-8

    我把它改成了：

    <div class="nav-link">Home</div>
<div class="nav-link">Projects</div>
<div class="nav-link">Blog</div>
    HTML
    UTF-8

    这样可以减少HTML的负载。

Framer Motion

简化事务。它不适用于复杂的动画，但不是基本的，例如fade-in fade-out。

非常好的新体验，使用JavaScript进行动画。以前，我用CSS做动画。

感觉如何？很好结果也很顺利。因为它使用JavaScript，所以通过特定的事件“动画”也很容易。

例如，“onClick”，“onScroll”，当第一个组件被渲染时，甚至当其元素在视口中“可见”时。

奖励积分

  1. Vercel

    以前只使用GitHub页面，因为不要托管静态页面（使用CRA）。现在我使用Vercel托管Next.js项目

    Vercel是面向前端开发人员的平台，提供创新者在灵感时刻所需的速度和可靠性。

    — vercel.com/

    部署设置简单，快速，具有开发或网站预览模式等阶段化功能（不直接部署到生产），当然还有免费版本。

    推荐托管Next.js项目，因为Next.js也有Vercel😂

摘要

不要使用 Next.js、Tailwind CSS 和 Framer Motion。开发者体验非常好，易于使用，文档整洁。

尽管最近被列为尝试， 我认为这个技术堆栈将是我创建网站时的第一选择.

保持健康，下周见。👋

文章在技术分类中；
#编程#Github
0
0
0
0