About Next.js and Tailwind CSS 🔥

January 22, 2023

English

Hello hello, it's been a week since my previous post Fitur Multiple ReactionsFitur Multiple Reactions.

This time I will not discuss the new features, but more about how it feels to use Next.js, Tailwind CSS, Framer Motion after about three months.

Yep, three months. All these technologies I have just used for the first time in the making of this website which started around October 23, 2022.

It all started from this Tweet.

This is just my story, based on what I feel. I'm not comparing it with similar tech stacks because I've never used anything else hehe.

Direct gas yes..

Next.js

Previously, when I made a React website, I liked to use CRA, and now I use Next.js on this website.

Honestly, it's really good to use Next.js. All the important features —that I need— have been prepared, the DX is stable, the docs are complete, the tutorials are to the point.

The coolest thing is that it supports SSG and SSR. But here are some features I like:

Routing

This is the most important. Already support routing out-of-the-box. It's very easy to make a dynamic page like a blog.

And what I like the most is the Routes API. To create an API endpoint, just use the API Routes, which have also been prepared. So there is no need to setup Express anymore.

MDX support

Very easy implementation of markdown or mdx for blogging using @next/mdx.

It is also possible to create a normal page, so it is really possible to create a normal page in mdx format or create a page with mostly 'writing' content.

Optimization

The use of fonts and images has been optimized by Next.js.

The Google font package just needs to be imported from the package @next/font. The image package already supports compression with ``srcset'' automatically.

It's not good, how about trying it?

In fact, there are many other small features, such as fast compiling, i18n routing, static HTML export, etc.

Take a look at the docs or try it first.

Tailwind CSS

Take a look at this sample code first (from the official site tailwindcss.com), which is styled using Tailwind CSS:

<figure class="rounded-xl bg-slate-100 p-8 dark:bg-slate-800 md:flex md:p-0">
  <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>

At first I thought rich:

why is the styling approach strange? Is the HTML really messy? if that's the case, why don't you just use iniline styles?

Ah, there's a lot of this and that 😂

But since I got a freelance project that uses Tailwind CSS, I want to use it too.

Turns out, it's also nice to use the Tailwind CSS. I tried and tested it in the creation of this website.

How does it taste?

Need to change files for styling

Markup and styles are enough in the same place. You need to open the css file, find the class name, find the class you want to edit, etc.

This is because the styles are attached to the HTML, so if you want to create or update components it is very easy and fast.

Just open the file, edit the content and edit the styles in the same place 🔥
Different from inline styles

My initial thought was wrong, it turns out that it is different from inine styles. The Tailwind CSS package, in the HTML it turned out that I could style things like hover, focus etc.
Full CSS support

Almost all CSS features are covered by Tailwind CSS. Create gradients, backdrop effects, grids, responsive design (breakpoints), etc.

Do you have more utility classes?

Yes! but if you use VS Code, it's really nice because it's already prepared with VS Code extension, where if you edit the HTML class, the Tailwind CSS autocomplete list utility class will appear!

Shorthand Utilities

You can use the inset-0 class for CSS whose output is:

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

Or there are many more like x and y for shorthand left+right and up+down. For example inset-x-0, px-2, border-y-0 etc.

Support dark mode

Tailwind CSS already provides utility classes (variants) named dark: which can be used for dark mode styling.

Example:
```
<div class="text-black dark:text-white">Hello, World!</div>
```
The text 'Hello, World!' above will be black by default and white in dark mode.
Output CSS size is small

Because Tailwind CSS automatically bundles the utility class that is used, so the output is small depending on how many utilities are used.

Is there anything you don't like? of course there is.

Long classname

This was also crowded on Twitter/X 😂 But I thought of using clsx() to make it a bit neater. Appearance:

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

The load on HTML is getting heavier

Although the CSS output is small, it is actually the HTML output that is larger. Because the long class name must add bit size to the HTML, right?

It can be tricked, back to the old way, where if you count the number of classes, especially if they are used repeatedly (for example looping), you can use normal css classes.

Example cases:

<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>

I changed it to:

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

That way it can reduce the load of the HTML load.

Framer Motion

This is about animation. It is not used to make complex animations, but just basic, like fade-in fade-out.

It's a really new experience, making animations using JavaScript. Because previously when I made animations I always used CSS.

What does it feel like? Yummy cuy. The result is also smooth. Because it uses JavaScript, it is easy to 'animate' through certain events.

For example onClick, onScroll, when the first component is rendered, or even when the element is 'visible' in the viewport.

Bonus Point

Vercel

Before, I only used GitHub pages, because it was only for hosting static pages (using CRA). Now I use Vercel for hosting the Next.js project

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

— vercel.com/

The deployment setup is not complicated, fast, staging features like development or preview mode for the site (does not directly deploy to production), and of course there is a free version.

Recommended hosting for the Next.js project, because Next.js has Vercel as well 😂

Summary

Just enjoy using Next.js, Tailwind CSS and Framer Motion. The developer experience is very good, easy to use and the docs are neat.

Even though I have just tried it, I think this tech stack is going to be my first choice when creating a website.

Maybe that's all, take care and see you next week 👋

Posted onstorieswith tags:

#next #tailwindcss #framer-motion