
Tailwind is a great CSS framework for rapidly building websites. Suppose someone asks me to choose CSS frameworks in bootstrap and tailwind CSS. I select bootstrap because the bootstrap is an old CSS framework. I used bootstrap lots of times in past projects. Right now, as a modern area of technology. Many companies hire front-end developers with tailwind CSS frameworks nowadays. There a serval reasons why the Tailwind CSS framework is a very high-demand technology in the front-end world.

1. Easy to remember CSS class name.
2. Tailwind never sends unused CSS on production.

I mention two benefits of tailwinds. I know There is a lot of help with a tailwind CSS framework. But I share two that are more critical for me. That is why I understood the tailwind importance and started to learn. If you learn more, then feel free to read these blogs.

## How to install Tailwind CSS in Nextjs?

Install Tailwind CSS framework in Nextjs with npm and yarn package manager. You easily install the Tailwind CSS framework with five steps.

1. Install Tailwind CSS framework
2. Configure your template paths
3. Add the Tailwind directives to your CSS
4. Start your Dev Server
5. Start using Tailwind CSS in your project


Tailwind CSS in Next.js


There are a few ways to build modern applications, two of the most common applications include single-page applications and server-rendered applications.

Single-page applications can be pretty useful for applications that will require better performance. Although Google has made some updates on how their crawler processes single-page applications, we still have a lack of SEO results. Server-side rendered applications can achieve better SEO results in search engines and still have a pretty decent performance.

The release of some awesome JavaScript frameworks, such as Next and Gatsby, has lead to more server-side applications being made. Let’s see a few reasons why single-page applications are not the best choice for some cases, especially for applications that are going to depend heavily on SEO.

## The problem with single-page applications (SPA)

Something that you should consider before choosing to build single-page applications or server-side rendered applications is the content that you want to show.

A single-page application (SPA), is an application that is not served from a new HTML page every time new content should be rendered, but it’s dynamically generated by JavaScript manipulating the DOM. Since there’s no need to load a new HTML page every time something needs to change, what’s the problem with SEO in SPA?

The problem with SEO in SPA is that the application cannot be properly indexed by search engines, which is different from server-side rendered applications. A SPA serves only an initial HTML file, so the search engines cannot index the content because in a single-page application you have the JavaScript generating new HTML every time something changes. Although SPAs have a lot of other advantages such as performance, saving time and bandwidth, better responsiveness on mobile devices, increased performance in slower internet connections, etc.

With server-side rendered applications, especially with Next.js, you can create a performant application and have good SEO at the same time.

## Performance

Visitors don’t want to wait an eternity for your page to load. Performance should be the main concern when building an app. Performance is actually a crucial factor for SEO.

Search engines, especially Google, use the First Contentful Paint (FCP) of your page as a crucial performance metric. FCP metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen. A page with a poor First Contentful Paint performance will result in a bad SEO result.

You can use Next.js to measure some metrics such as FCP or LCP (Largest Contentful Paint). All you have to do is create a custom App component and define a function called reportWebVitals:

```js
// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric);
}
```

The reportWebVitals function will be triggered when the final values of any of the metrics have finished on the page.

You can find out more about measuring performance in Next.js applications here. Here you can find a list of points that you should improve in order to get a nice FCP result.


How Next.js improve SEO


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

... More content ...


Hi‚ I’m Annabeth

Featured Posts

Tailwind CSS in Next.js

How Next.js improve SEO

Getting Started NextJS