🚀 Projeto Next.js com Zustand

Bem-vindo ao Projeto Next.js com Zustand! Este é um projeto incrível que utiliza o poder do Next.js para renderização do lado do servidor e o Zustand para gerenciamento de estado global. Vamos embarcar nessa jornada juntos! 🌟

📚 Sobre o Projeto

Este projeto é uma aplicação web moderna que demonstra como integrar o Next.js com o Zustand para criar uma experiência de usuário fluida e eficiente. Com este projeto, você aprenderá a:

• ⚙️ Configurar um projeto Next.js
• 🗂️ Utilizar o Zustand para gerenciamento de estado
• 🧩 Criar componentes reutilizáveis e estilizados

🛠️ Tecnologias Utilizadas

• Next.js: O framework React para produção. Documentação
  • 🌐 Renderização do lado do servidor (SSR)
  • 📄 Geração de sites estáticos (SSG)
  • ✨ Suporte a TypeScript
  • 🗺️ Roteamento baseado em arquivos
• Zustand: Um pequeno, rápido e escalável gerenciador de estado para React. Documentação
  • 🧩 API simples e minimalista
  • 🔌 Suporte a middlewares
  • 💾 Persistência de estado
• Tailwind CSS: Um framework CSS utilitário para estilização rápida e responsiva. Documentação
  • 🎨 Classes utilitárias para estilização
  • 🛠️ Configuração altamente customizável
  • 🌗 Suporte a temas e modos escuros

🚀 Começando

Siga estas etapas para configurar o projeto localmente:

1. 📥 Clone o repositório:

   git clone https://github.com/luis-portfolio/Projeto-NextJs-Zustand.git

2. 📂 Navegue até o diretório do projeto:

   cd Projeto-NextJs-Zustand

3. 📦 Instale as dependências:

   npm install

4. ▶️ Inicie o servidor de desenvolvimento:

   npm run dev

Nota: Este projeto utiliza Next.js com TypeScript para garantir uma melhor experiência de desenvolvimento e maior robustez no código.

⚙️ Configurar um projeto Next.js

Para configurar um projeto Next.js, siga os passos abaixo:

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

   npx create-next-app@latest --typescript

2. Navegue até o diretório do projeto:

   cd nome-do-projeto

3. Inicie o servidor de desenvolvimento:

   npm run dev

🗂️ Utilizar o Zustand para gerenciamento de estado

Para utilizar o Zustand no seu projeto, siga os passos abaixo:

1. Instale o Zustand:

   npm install zustand

2. Crie um store para gerenciar o estado:

   import create from 'zustand';
   
   interface State {
     count: number;
     increment: () => void;
     decrement: () => void;
   }
   
   const useStore = create<State>(set => ({
     count: 0,
     increment: () => set(state => ({ count: state.count + 1 })),
     decrement: () => set(state => ({ count: state.count - 1 }))
   }));
   
   export default useStore;

3. Utilize o store nos seus componentes:

   import useStore from '../path/to/store';
   
   function Counter() {
     const { count, increment, decrement } = useStore();
     return (
       <div>
         <h1>{count}</h1>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
       </div>
     );
   }

🧩 Criar componentes reutilizáveis e estilizados

Para criar componentes reutilizáveis e estilizados, siga os passos abaixo:

1. Crie um componente reutilizável:

   interface ButtonProps {
     onClick: () => void;
     children: React.ReactNode;
   }
   
   function Button({ onClick, children }: ButtonProps) {
     return (
       <button onClick={onClick} className="px-4 py-2 bg-blue-500 text-white rounded">
         {children}
       </button>
     );
   }
   
   export default Button;

2. Utilize o componente nos seus outros componentes:

   import Button from '../path/to/Button';
   
   function App() {
     return (
       <div>
         <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
       </div>
     );
   }

✨ Preview

https://projeto-nextjs-zustand.vercel.app

📄 Licença

Este projeto está licenciado sob a Licença MIT. Veja o arquivo LICENSE para mais detalhes.

👤 Autor

Este projeto foi desenvolvido por Luis Caldas, Senior Software Engineer.