Template Next.js

Guia completo para desenvolvedores: como configurar e usar este template Next.js

🚀 Primeiros Passos

1. Instalação

# Clone o repositório
git clone https://github.com/hous3/template-nextjs.git meu-projeto

# Entre no diretório
cd meu-projeto

# Instale as dependências
yarn install

# Inicie o servidor de desenvolvimento
yarn dev

# Em outro terminal, inicie o servidor GraphQL
yarn server

2. Estrutura do Projeto

src/
├── app/                    # App Router (Next.js 13+)
│   ├── layout.tsx         # Layout raiz
│   ├── page.tsx           # Página inicial
│   ├── login/             # Páginas de autenticação
│   ├── dashboard/         # Dashboard protegido
│   └── globals.css        # Estilos globais
├── components/            # Componentes reutilizáveis
│   ├── ui/               # Componentes shadcn/ui
│   ├── layout/           # Header, Footer
│   └── theme-*.tsx       # Componentes de tema
├── config/               # Configurações
│   └── theme.ts          # Configuração de tema
└── lib/                  # Utilitários

🎨 Configuração de Tema

Personalizando o Tema

Edite o arquivo src/config/theme.ts para personalizar:

export const themeConfig = {
  // Informações do projeto (personalizáveis)
  project: {
    name: "Meu App Incrível",
    description: "Descrição do meu projeto",
  },

  // Informações da agência (NÃO ALTERAR)
  agency: {
    name: "HOUS3",
    website: "https://hous3.digital",
  },

  // Cores do tema
  colors: {
    light: {
      primary: "210 100% 50%", // Azul personalizado
      secondary: "210 40% 96.1%",
      // ... outras cores
    },
    dark: {
      primary: "210 100% 60%", // Versão escura
      secondary: "217.2 32.6% 17.5%",
      // ... outras cores
    },
  },
};

Primary

Secondary

Accent

Muted

🧩 Componentes Incluídos

shadcn/ui

Componentes modernos e acessíveis já configurados:

• Button, Input, Card
• Form, Label, Avatar
• Dropdown Menu, Sheet
• Theme Toggle

Autenticação

Sistema completo de autenticação:

• Login e Registro
• Recuperação de senha
• Validação com Zod
• React Hook Form

GraphQL + Apollo

Cliente Apollo configurado:

• Servidor GraphQL local
• Queries e Mutations
• Cache automático
• TypeScript support

Storybook

Documentação de componentes:

• Stories configuradas
• Controles interativos
• Documentação automática
• yarn storybook

💻 Exemplos de Código

Criando uma Nova Página

// src/app/minha-pagina/page.tsx
  import { Header } from "@/components/layout/header";
  import { Footer } from "@/components/layout/footer";
  import { Button } from "@/components/ui/button";

  export default function MinhaPagina() {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-1 container py-8">
          <h1 className="text-3xl font-bold mb-4">Minha Página</h1>
          <Button>Clique aqui</Button>
        </main>
        <Footer />
      </div>
    );
  }

Usando GraphQL

// Exemplo de query
  import { useQuery, gql } from '@apollo/client';

  const GET_USERS = gql`
    query GetUsers {
      users {
        id
        name
        email
      }
    }
  `;

  function UsersList() {
    const { loading, error, data } = useQuery(GET_USERS);

    if (loading) return <p>Carregando...</p>;
    if (error) return <p>Erro: {error.message}</p>;

    return (
      <ul>
        {data.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }

🎯 Próximos Passos

1. Personalize

Configure o tema, nome do projeto e cores no arquivo theme.ts

2. Desenvolva

Crie suas páginas e componentes usando a estrutura existente

3. Deploy

Faça o build e deploy da sua aplicação em produção

Testar Autenticação Ver Lista de Tarefas