Introdução

Neste tutorial, vamos aprender a criar uma tela modal de forma descomplicada utilizando ReactJS com Next.js e TypeScript. As modais são componentes muito comuns em aplicações web para exibir informações adicionais ou solicitar ações do usuário sem sair da página atual.

Passo a Passo

1. Crie um novo projeto Next.js com TypeScript:

npx create-next-app --ts my-modal-app

2. Crie um componente Modal dentro da pasta components:

components/Modal.tsx

3. No componente Modal, adicione a estrutura básica da modal utilizando o hook useState:


import React, { useState } from 'react';

const Modal = () => {
const [isOpen, setIsOpen] = useState(false);

const openModal = () => {
setIsOpen(true);
}

const closeModal = () => {
setIsOpen(false);
}

return (

Abrir Modal
{isOpen && (

×

Minha Modal

Conteúdo da modal aqui...

)}

);
}

export default Modal;


4. Estilize a modal utilizando CSS:


.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modal-content span {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}


5. Adicione o componente Modal na página inicial do seu projeto:

pages/index.tsx

6. Teste a funcionalidade da modal em sua aplicação Next.js:

npm run dev

Conclusão

Parabéns! Você aprendeu a criar uma tela modal de forma descomplicada utilizando ReactJS com Next.js e TypeScript. As modais podem ser personalizadas de acordo com as necessidades de sua aplicação e oferecer uma experiência mais interativa para os usuários.