Next UI com Next Js 13

Olá! Criei este tutorial básico para ensinar como utilizar Next-UI com Next JS 13 pois não achei em português e até mesmo em Inglês nenhum blog ou plataforma ensinando como utilizar Next-UI juntamente com Next JS 13.

Contexto:
Next UI é uma library criado por um desenvolvedor argentino. Essa library visa integrar as variáveis do tailwindcss juntamente com diversos components pré-estilisados pelo programador.
Ele é bem completa, apesar de estar apenas na versão 2.0.0 (até o momento dessa publicação)

Preferências:

Recomendação pessoal: Utilize Javascript, pois a biblioteca possui alguns problemas ao utiliza-la com projetos Typescript.
Lembrando que é uma recomendação pessoal, ok? Não obrigatória.

Vamos ao PASSO A PASSO:

1 - Obviamente é necessário criar um projeto Next, então, digite o seguinte comando recomendado pela Vercel para criar projetos Next.

obs: Depois de digitar o comando abaixo 👇, no momento de selecionar as configurações do projeto, de um yes para a opção do TAILWINDCSS, para não precisar instala-lo depois manualmente.

DIGITE NO TERMINAL DA SUA MÁQUINA: npx create-next-app
Link da referência: https://nextjs.org/

2 - Caso não tenha instalado o tailwindcss junto das configurações do seu projeto Next, siga o passo a passo do link abaixo para instala-lo e configura-lo manualmente.

Caso já tenha instalado o Tailwindcss, pule pro passo 3.

Link referência Tailwindcss para Instalação Manual: https://tailwindcss.com/docs/installation

3 - Instale o Next-UI no seu projeto

Digite o comando abaixo para instalação do Next UI no seu projeto.

npm i @nextui-org/react framer-motion

No seu arquivo tailwind.config.js, adicione as seguintes configurações:
// tailwind.config.js

const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} /

module.exports = {

content: [

// ...

"./node_modules/@nextui-org/theme/dist/**/.{js,ts,jsx,tsx}",

],

theme: { extend: {}, },

darkMode: "class",

plugins: [nextui()],

};

4 - Na raiz do seu projeto adicione o <NextUiProvider> envolvendo toda a aplicação, afim de que você consiga utilizar os componentes em toda a aplicação (caso não possua um arquivo providers.jsx, crie um arquivo providers.jsx na raiz do seu projeto).

Segue exemplo:

// app/providers.jsx 'use client' import {NextUIProvider} from '@nextui-org/react' export function Providers({children}: { children: React.ReactNode }) { return ( <NextUIProvider> {children} </NextUIProvider> )}

Essa estrutura é recomendada pois o Provider da aplicação é isolado e este provider precisa ser envolvido pelo 'use client' no topo do arquivo.
Sendo assim você converte somente o Provider como um Client Component e o restante continua como Server Component.

5- Adicione o Provider a Layout Root da sua aplicação:

`// app/layout.jsx`

`import {Providers} from "./providers";`

`export default function RootLayout({children}: { children: React.ReactNode }) {`

`return (`

`<html lang="en" className='dark'>`

`<body>`

`<Providers>`

`{children}`

`</Providers>`

`</body>`

`</html>`

`);}`

6 - Caso esteja utilizando pnpm é necessário adicionar as seguintes configurações ao seu arquivo '.npmrc':

public-hoist-pattern[]=@nextui-org/theme

7 - Utilize os components NextUI em qualquer lugar da sua aplicação. Lembre-se e importa-los como eles são.

Por exemplo:

`CORRETO: import {Button} from '@nextui-org/button'`

`INCORRETO: import {Button} from '@nextui-org/react'`

8 - Lembre-se que não é necessário utilizar 'use client' dentro de cada página que você colocar um componente do tipo Next UI, pois o próprio Next UI já está fazendo isso por baixo dos panos.

Top né ?

Vlw por ler até aqui e até a próxima!

Utilizando Next-UI com Next JS 13

Table of contents