
If you enjoy video content, be sure to subscribe to my channel to stay updated on new content!
[![VIDEO IMAGE](https://img.youtube.com/vi/Hy2vHVER2bA/0.jpg)](https://youtu.be/Hy2vHVER2bA?si=v5U_NVGR4g6O33vr)

Now, let's dive into the content!

![Next.js Libraries](/images/assets/libsnext.png)

It's no longer a secret among developers that Next.js is truly an incredible product.

Want to take your Next.js frontend to the next level?

I'll share 7 very useful libs for you to use in your personal projects. And here's the deal – there's no silver bullet, okay? **It's just my opinion**... LET'S GO!

![Next.js GIF](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXlvbHYxcWoxOHBraDg5dWFuNm05emRndzNrd3pjaDBnNWVuMXJrbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/t3sZxY5zS5B0z5zMIz/giphy-downsized-large.gif)

## [1. Prisma](https://www.prisma.io/)

Prisma is not specific to Next.js. It's an [ORM](https://en.wikipedia.org/wiki/Object-relational_mapping) for working with your database.

ORM is a unified wrapper for database queries.

It maintains a good structure and allows quick switching between different database providers.

While there are many ORMs you can use, Prisma supports TypeScript for its queries, making everything 100x faster. Next.js has embraced TypeScript in its default configuration, making it a perfect match.

Another cool ORM that's gaining popularity in the community is [Drizzle](https://orm.drizzle.team/). Unlike Prisma, it's more [SQL-like](https://en.wikipedia.org/wiki/SQL).

Other ORMs and data structures tend to divert/abstract you from SQL, leading to a double learning curve – the need to know both SQL and the structure's API.

Drizzle is the opposite.

It's very similar to SQL, so you can have zero or minimal learning curve and access all the power of SQL.

## [2. Shadcn-ui](https://ui.shadcn.com/)

This one is a bit more personal, but Shadcnui was created to address a latent pain in UIs. There's a [video](https://youtu.be/JydWcRqUOVc?si=JORq_eelGuwfT25X) on the channel where I explain more about the advantages and disadvantages, but with this UI, it's much easier to work on large projects and systems.

## [3. Trigger dev](https://github.com/triggerdotdev/trigger.dev)

Imagine a process that needs to run every day at 5 pm... How to implement cron jobs in Next.js?

![Trigger Dev GIF](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMTZ6bjg3bXExY3E5M3k3bHg0c3d3azRjM2NwenQ1Y3B3NGhmZzU3ZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/8lQyyys3SGBoUUxrUp/giphy.gif)

Some people might say it's impossible, but it's possible thanks to [Trigger Dev](https://github.com/triggerdotdev/trigger.dev). They offer Background Jobs for applications. Not necessarily just for Next.js but for any other application where you want to implement cron.

## [4. NextAuth](https://next-auth.js.org/)

Suppose you want to implement authentication from service providers like Facebook/Google/GitHub (oAuth). In that case, you either have to create your implementation for each provider or use an external service like [kide](https://github.com/kinde-oss) or [Clerk](https://clerk.com/).

If you want to do everything on your own without using a third-party service, you can use NextAuth, which provides an easy implementation for you to add them easily, providing only the correct keys.

## [5. Trpc](https://trpc.io/)

End-to-end typesafe

If you don't want to create a traditional API, Trpc is excellent for creating a backend because it is end-to-end typesafe. There's a [video](https://youtu.be/eBe8OsSQb60?si=dumQXlSCOTZsJ8Vt) on the channel where I teach how to create a project with a Next.js monorepo and Trpc; it's worth checking out later. But it's very useful, especially for those who love TypeScript because you won't have to worry about typing both your front and back-end, allowing you to **focus on other important parts**.

## [6. ZOD](https://zod.dev/) and [React Hook Form](https://react-hook-form.com/)

Zod is an object validator (server and client).

You can put different rules on an object and validate it later, like a username and password or more complex things.

Zod is not specific to Next.js.

On the other hand, React Hook Form is **specific** to React.

React Hook Form is an excellent project for client-side validation (showing errors in inputs, managing input state, and sending).

## [7. React-Query](https://tanstack.com/query/latest)

It's an incredibly useful tool for developers looking to improve the performance and usability of their React-based applications.

It does automatic state management, so you don't have to worry about manually managing the state of your API requests or data cache; the library does it automatically.

Supports pagination and on-demand loading; there's a [video](https://youtu.be/dgY2YzeMsbU?si=JRBHMDbIEj1gTwnj) on the channel where I teach how to use infinite scroll with this library, and integration is extremely simple.

![React Query GIF](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaTljc29mc293Mzh6Z2M0OXNjNDc0c2lkZGI2bHhieTJydHlsZ2hiNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/WIo9wmSckGHhnipiym/giphy.gif)

And that's it; every day more technologies are emerging, so until next time!

I hope I've helped you with something; good luck on your journey!

If you enjoyed this content, check out my [YouTube channel](https://www.youtube.com/@lorenaporphirio), and if it makes sense to you, consider subscribing =)

Until next time!
![Goodbye GIF](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTgzaGt5M3ZxcXMzem5yOHFuZjVnbHQ2c3dpMmV2Z2p1ZjhlM3I1cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cMPdlbcUKl3xkMCyD3/giphy.gif)


7 libs nextjs


If you enjoy video content, feel free to subscribe to my channel and turn on notifications to stay updated on new content!
[![VIDEO IMAGE](https://img.youtube.com/vi/QYCa_2ImFxw/0.jpg)](https://youtu.be/QYCa_2ImFxw?si=v5U_NVGR4g6O33vr)

Now let's dive into the content!

![https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXlvbHYxcWoxOHBraDg5dWFuNm05emRndzNrd3pjaDBnNWVuMXJrbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/t3sZxY5zS5B0z5zMIz/giphy-downsized-large.gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXlvbHYxcWoxOHBraDg5dWFuNm05emRndzNrd3pjaDBnNWVuMXJrbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/t3sZxY5zS5B0z5zMIz/giphy-downsized-large.gif)

If you are a developer and are already familiar with the [thousands of extensions available on Chrome](https://chromewebstore.google.com/?hl=pt-br), you know that some of them make our lives much easier.

It's possible to **automate tasks, create processes, and consume data** that aid in development, such as [Redux DevTool](https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd), [React DevTool](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), and apps that assist in [text correction](https://chromewebstore.google.com/detail/corrector-ortogr%C3%A1fico-y-g/oldceeleldhonbafppcapldpdifcinji).

In short, it's a massive market. Just take a look at the Google Chrome store, where you can find almost everything from productivity apps to mouse cursor modifiers.

In this article, I'll teach you the basics of creating your own extension with React, Vite, and Tailwind. The extension we'll develop is a simple CPF and CNPJ generator. The source code is available [here](https://github.com/LorenaKauane/extension-app).

![Extension Image](https://github.com/LorenaKauane/extension-app/blob/main/src/assets/exxtension.PNG?raw=true)

Let's get to the code!

## SETUP

First, you need to have a project running in Vite.

```bash
npm create vite@latest my-project -- --template react
```

To install Tailwind, you can easily do so by following the [official documentation](https://tailwindcss.com/docs/guides/vite) from Tailwind.

## Creating the manifest file

Now, in the public folder, create a file named `manifest.json`.

The `manifest.json` file is a manifesto file used in browser extensions, including extensions for Google Chrome, Mozilla Firefox, Microsoft Edge, and other browsers that support extensions.

The `manifest.json` contains information about the extension, such as the name, version, description, icons, required permissions, pages the extension should include or modify, among other settings. This file is **essential** for the creation and **operation** of an extension.

```json
{
  "name": "Extensions",
  "description": "Chrome Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_title": "Extension"
  },
  "icons": {
    "16": "document.png",
    "48": "document.png",
    "128": "document.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}
```

## Running

Now just run `npm run build`, open Google Chrome, go to **Settings/Extensions/Manage Extensions**, and it's very important that you have developer mode enabled, okay?

Then click on **'Load unpacked'** and select your dist folder. That's it!

Your first extension is now created. The sky's the limit for you now.
![https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeWp0Y25mcmc4ZmxxM2gzN3ppZ2wxbXZneXo4cHRtemN6azg4ZGZnbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dWBn8eg9Ygpc2eBn5L/giphy-downsized-large.gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeWp0Y25mcmc4ZmxxM2gzN3ppZ2wxbXZneXo4cHRtemN6azg4ZGZnbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dWBn8eg9Ygpc2eBn5L/giphy-downsized-large.gif)

## Document Generator

To create the document generator, you need this library.

`npm install cpf-cnpj-validator`

In the `App.jsx` file, make the following changes:

```jsx
...
import { cpf, cnpj } from 'cpf-cnpj-validator';
...

function App() {
  const [typeOperation, setTypeOperation] = useState('cpf');
  const [isFormat, setIsFormat] = useState(true);
  const [inputValue, setInputValue] = useState('');
  const [isAlert, setIsAlert] = useState(false);

  const operations = {
    cpf: {
      generate: cpf.generate,
      format: cpf.format,
    },
    cnpj: {
      generate: cnpj.generate,
      format: cnpj.format,
    },
  };

  useEffect(() => {
    setInputValue(operations[typeOperation].generate(isFormat));
  }, [typeOperation]);

  function generateDocument() {
    const value = operations[typeOperation].generate(isFormat);
    setInputValue(value);
  }

  async function showAlert() {
    setIsAlert(true);
    await navigator.clipboard.writeText(inputValue);
    setTimeout(() => setIsAlert(false), 2500);
  }

  return (
    <>
      <div className="flex justify-center">
        <div>
          <p className=" text-3xl font-bold my-3">
            Gerador de documento brasileiro
          </p>
          <p>Selecione o tipo o documento</p>
          <div className="flex mb-4">
            <Checkbox
              label="CPF"
              onChange={() => setTypeOperation('cpf')}
              checked={typeOperation == 'cpf'}
            />
          </div>
          <div className="flex items-center ">
            <Checkbox
              label="CNPJ"
              onChange={() => setTypeOperation('cnpj')}
              checked={typeOperation === 'cnpj'}
            />
          </div>
          <div className="flex  items-center justify-between ">
            <Toggle
              label="Formatado?"
              checked={isFormat}
              onChange={(e) => {
                setInputValue(
                  !isFormat
                    ? operations[typeOperation].format(inputValue)
                    : inputValue.replace(/\D/g, '')
                );
                setIsFormat(!isFormat);
              }}
            />
            <Button text="Gerar" onClick={() => generateDocument()} />
          </div>
          <div className="relative my-3">
            <input
              type="search"
              id="search"
              className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 my-3"
              placeholder="Search"
              value={inputValue}
              required
              disabled
            />
            {isAlert && (
              <div
                class="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 mt-3"
                role="alert"
              >
                <span class="font-medium">Copiado com sucesso 😊 </span>
              </div>
            )}
            <Button text="Copiar" onClick={() => showAlert()} />
          </div>
        </div>
      </div>
      <div className="flex mt-3 text-sm text-gray-400">
        <a href="https://lorenaporphirio.com/" target="_blank">
          Feito por: Lorena Porphirio ✨
        </a>
      </div>
    </>
  );
}

export default App;
```

I hope I've helped you with something. Good luck on your journey!

If you enjoyed this content, check out my [YouTube channel](https://www.youtube.com/@lorenaporphirio), and if it makes sense to you, subscribe =)

Until next time!
![https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTgzaGt5M3ZxcXMzem5yOHFuZjVnbHQ2c3dpMmV2Z2p1ZjhlM3I1cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cMPdlbcUKl3xkMCyD3/giphy.gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTgzaGt5M3ZxcXMzem5yOHFuZjVnbHQ2c3dpMmV2Z2p1ZjhlM3I1cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cMPdlbcUKl3xkMCyD3/giphy.gif)


How create google extension


If you enjoy video content, feel free to subscribe to my channel and activate notifications to not miss any new content!
[![VIDEO IMAGE](https://img.youtube.com/vi/jGlTBhvQF9o/0.jpg)](https://youtu.be/jGlTBhvQF9o?si=v5U_NVGR4g6O33vr)

> Note: It's highly important for you to watch the video because the content is **more comprehensive with videos**. This post will be a summary of the video, but I guarantee it's definitely worth it.

Now, let's get into the content!

![Animated GIF](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMncwYWUxY2NmeGoyenUxMW90bWw1cnR4YmV4bWZoM3J4Z3k1b3NlaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dMsh6gRYJDymXSIatd/giphy.gif)

Yes, I know! This seems like a cliché! **But I'm not selling anything to you and don't expect me to say anything negative about programming courses.**

The decision to choose the right course can be overwhelming. But think about it...

The **best** programmers started somewhere...
They might have learned in **college, courses, videos, or simply by practicing**, but the fact is, to get there, they had to acquire a theoretical foundation from somewhere.

In today's article, I'll help you discover the **course** you really need.

["Soul"](<https://en.wikipedia.org/wiki/Soul_(2020_film)>) tells the story of Joe Gardner, a jazz musician whose soul is separated from his body and transported to a place called "The Great Before." There, he embarks on a spiritual journey and befriends a soul named 22. Together, they explore profound questions about life, passion, purpose, and the true meaning of **existence**.

![Animated GIF](https://media.giphy.com/media/yjYc3HM5XIABsCFS4U/giphy.gif)

I absolutely LOVE this movie with all my heart because, when I first watched it, it made me reflect on various aspects of my personal and professional life. Here's my recommendation.

![Animated GIF](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMGdlMzhldTRrcmFkeTRneHAxbWhxZXFoZGY3OTFpcmQ0NXY2ZGV0YiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SqUCitl46EEYiEVjsX/giphy.gif)

> But, Lorena, what does this have to do with choosing a programming course?

First of all, we need to understand **our passions**, what truly **attracts and identifies us**. There's no perfect course, but there are courses made for every type of person, every personality, and career position. And there are thousands of course subcategories. Therefore, it's crucial for you to understand what you like.

For your reference, the average completion rate of courses is around 15%. Why? Firstly, because some courses are extensive, requiring many hours, weeks, or even months, and sometimes you pay a lot for a course and only watch 5 hours.

Another reason is that people want to learn things very quickly, especially beginners. They want to master the latest technologies, buying several courses to learn just a portion of the content. I did this a lot, but there's something I learned during this time, something that made all the difference. I'll tell you about it in the article.

## Your biggest enemy... is yourself.

Learning programming is an exciting journey filled with challenges. It's a valuable skill that opens doors to incredible opportunities in the world of technology.

After all, we have thousands and thousands of courses on various technology-related topics: courses on being a **PM, JavaScript, DevOps**, among others. It's a gigantic world. However, as in any significant endeavor, the key to success is **consistency**.

Just like everything in life, right... Everything...

![Animated GIF](https://media.giphy.com/media/njiIlbPU29nDM0cMpH/giphy.gif)

You can pay from 0 to 6 thousand dollars for a course, but if you're not consistent, you'll end up wasting your money and time.

Imagine a musician who only plays their instrument occasionally or an athlete who trains sporadically. They'd hardly achieve a high level of mastery in their areas. For example, I have two guitars here. If I play a very simple SONG occasionally just because I don't practice or study...

The same principle applies to programming. I code every day, so it's OBVIOUS that I'll be a better programmer than a musician.

![Animated GIF](https://media.giphy.com/media/HPi9NCcuwYJkLmZetl/giphy.gif)

Remember that consistency doesn't mean you have to study for hours or complete a course in the same week. It's more about **maintaining a constant commitment to your learning, no matter how modest**.

For example, I study English almost every day, besides investing in a teacher to communicate with. I try to read something in English every day, be it a book, video, or series. The amount of things I've learned is immense.

I study/read about entirely random things, like learning to do an edit instead of researching in PT, I search in EN. It's these things that help me maintain consistency. Today, I'm not fluent, but my English is better than it was 6 months ago; it's a continuous effort, like going to the gym, playing music, and so on.

Programming is a skill that accumulates over time, and every small step in the right direction will bring you closer to achieving your goals.

## Know your current career stage and try to envision your future

As I mentioned earlier, there are thousands of courses available in the market today, and it's extremely important to understand your position in the market.

If I absolutely know nothing, maybe a beginner's course would be better.

If I'm a junior to mid-level, understanding best practices.

From mid-level to senior, better understanding architecture, data structure, caching, and so on...

Try to understand your future too. For instance, if I want to work outside Brazil, I need to understand the fundamentals very well and be fluent in English.

If I want to be just an entrepreneur, perhaps I don't need such in-depth knowledge of technology. Sometimes, a full-stack course would be more worthwhile for me, studying marketing and sales.

There's a video on the channel where I tell the story of [two Brazilian billionaires](https://youtu.be/CUd1acI5w3A?si=Xeq-bdhZ8SKX6z7a), both developers, but they prefer to hire people better than them and focus on their business.

Another video on the channel tells the story of [Piter Levels](https://youtu.be/WQ4Oi9nyFOY?si=wKrJxsgknI7Zvup_), who knows how to code, has created over 70 projects, but his focus is 100% on entrepreneurship.

There are courses that teach the basics of programming to create projects and start selling them. There are various aspects, various courses, from various areas.

## Relationship

Here's something I learned after a long time.

A few years ago, I decided I wanted to learn about web development. I bought countless courses on Udemy, and if I completed one course, it was a lot. But during that period, I already consumed a lot of content from people in the tech area, whether on YouTube or Twitter.

I consumed a lot of content from [Willian Justen](https://willianjusten.com.br/). Currently, he's paused sharing things, but when he opened registrations for his course, I went there and bought it. Guess what? It was one of the courses in which I delved deeper and watched until the end. Why?

I already consumed a lot of his content, liked the video formats, many interesting articles, many ideas I agreed with as well. In some way, I created a 'relationship' with him. And that, for sure, was decisive at the time of purchase and in continuing the course.

So, yes, **BUY courses**, but buy courses from people whose content you already consume and that are aligned with your **present and future**.

Whether it's Dechamps' course, Erik's course, Rocketseat's course, or any other course. Currently, I don't buy courses on Udemy, for example, because I know I might start but won't finish them. But that's me, alright? Personally, I choose to support/buy from people whose content I already consume.

My current reality is different for someone who's starting, for example. For someone starting out, Udemy is a pretty good channel, but you need to research the teachers, see if they have free courses, and identify with them.

But remember, only buy if you're **100% motivated and committed to the course**, because they don't perform miracles, they just show you the way, but it's up to you to pursue it.

Good luck on your journey!

Until next time!
