windmill dashboard nextjs typescript
1.0.0
Veja o projeto original de @estevanmaito
Com a ajuda de outros colaboradores:
Veja isso ao vivo
Este não é um modelo. Este é um aplicativo completo, construído sobre o React, com todos os pequenos detalhes, então você só precisa trazer os dados para alimentá -los.
A acessibilidade é uma prioridade em meus projetos e acho que também deveria estar no seu, então isso foi desenvolvido ouvindo leitores de tela reais, armadilhas de foco e navegação no teclado estão disponíveis em todos os lugares.
O React do painel de moinho de vento é construído sobre a interface do usuário do Windmill React. Você encontrará a documentação para cada pequeno componente lá.
Todos os componentes e recipientes são salvos no exemplo de pasta
Altere o redirecionamento padrão quando atinge o / ou home no arquivo next.config.js
async redirects ( ) {
return [
{
source : '/' ,
destination : '/example/login' ,
permanent : false ,
} ,
]
} Para configurar menus da barra lateral, consulte o arquivo (rotas/Sidebar.tsx).
Essas são as rotas que serão exibidas na barra lateral. Eles esperam três propriedades:
path : o destino;name : o nome a ser mostrado;icon : um ícone para ilustrar o item Item que são usados como suspensos, como a opção Páginas, não precisam de um path , mas espere uma matriz de routes de objetos com path e name :
// sidebar.js
{
path : '/example/tables' ,
icon : 'TablesIcon' ,
name : 'Tables' ,
} ,
{
icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
name : 'Pages' ,
routes : [
// submenu
{
path : '/example/login' ,
name : 'Login' , // <-- these don't have icons
} ,
{
path : '/example/create-account' ,
name : 'Create account' ,
} , Este é um project create-next-app
Primeiro, instale dependências:
npm install
# or
yarn installEm seguida, você pode executar o servidor de desenvolvimento:
npm run dev
# or
yarn devAbra http: // localhost: 3000 com seu navegador para ver o resultado.
Você pode começar a editar a página modificando pages/index.tsx . A página de atualização automática ao editar o arquivo.
As rotas da API podem ser acessadas em http: // localhost: 3000/API/Hello. Este terminal pode ser editado nas pages/api/hello.ts .
O diretório pages/api é mapeado para /api/* . Os arquivos neste diretório são tratados como rotas de API em vez de páginas de reação.
Para saber mais sobre o Next.js, dê uma olhada nos seguintes recursos:
Você pode conferir o repositório Next.JS Github - seus comentários e contribuições são bem -vindos!
A maneira mais fácil de implantar seu aplicativo Next.js é usar a plataforma Vercel dos criadores do Next.JS.
Confira nossa documentação de implantação do Next.js para obter mais detalhes.
