Título H1

Título H2

Título H3

Texto 1xl escrito em pages/aprendizado.js

Texto em Colunas

Resumo de conteúdos aleatórios sobre o NextJs

NextJS é um framework amplamente utilizado pela comunidade do React fornecendo componente para rotas, suporte typescript, bundling inteligente, server side renderind. Foi criado para construção de aplicações escalaveis. É uma ferramenta que consegue rodar código front-end no lado do servidor, sendo um OpenSource de licença MIT. O React é uma lib de JS mais utilizadas do momento, e os componentes do React manipulam o Dom, mas também pode renderizar os mesmos componentes pelo servidor e enviar diretamente para o navegador.

Existem infitos frameworks mas esse é um dos que mais ganhou notabilidade atualmente. Criado para suprir as necessidades de desenvolvedores React.

Soluções do NextJS

• Sistema de roteamento baseado em páginas com suporte a rotas dinamicas
• Pré renderização de paginas com suporte a SSG (Static Generation) o HTML é gerado na execução e reutilizado a cada Request ou então o SSR com renderização do lado do server
• Divisão de código automatico e otimização do SEO
• Roteamento do lado do cliente com Prefetching
• Suporte integrado para CSS Sass ou qualquer lib CSS-in-JS
• Ambiente em desenvolvimento com suporte Fast Refresh
• API Routes para criação de API Endpoints com Serveless Functions
• Totalmente extensível

Lições aprendidas até aqui

• Eu ainda não sei o que é React e o que é NextJs no código, pois parecem ser as mesmas coisas escritas. Ainda é necessário estudar mais sobre.
• As 'keys' que ficam dentro da tag Head protegem que o conteúdo não fique duplicado na renderização, mesmo que haja mais de um Head no documento.
• Dentro da tag Links ainda existe a tag a do HTML pois isso ajuda na confecção de Estilos CSS.
• O resultado de uma função é expresso dentro de uma tag de div.
• O favicon.ico parece ser meio que automaticamente identificado na pasta public/ mesmo assim eu inseri uma tag meta sobre o icon dentro da tag Head
• A seção de referencias da documentação do NextJS é muito rica de conteúdo. Para acessar clique aqui
• A target de links dentro da tag a.
• Para criar uma página de erro basta um arquivo 404.js com o conteúdo dentro, sem muita configuração.
• Eu ainda não sei adicionar um CSS direito aqui, mas já sei que vou usar o Tailwind onde a instalação é disponibilizada de duas formas neste link
• A vantagem do SSR do NextJS faz com que o SEO não seja ignorado pelos motores de busca
• O bootstrap tem várias classes e elas tem varias instruções/propriedades (classes/blocos) e o tailwind tem uma classe para cada propriedade, assim nada é fixo mas é responsivo de forma simples e customizavel.
• Existem diversos repositórios de tailwind como: aqui e aqui e aqui por exemplo.
• Estou inserindo em Admin vários recursos descritos na documentação com intenção de entender a lógica para elaborar template. Para isso estou estudando o Core Concepts Core Concepts
• Antes de corrigir um erro de CSS verifique o arquivo tailwind.js
• Conforme pode ser analisado nos códigos das páginas que usam class no lugar de className, veremos erro no console com o DOM sugerindo que a propriedade class seja className
• DevSamples foi uma ótima referência para saber como inserir uma tag script diretamente no NextJS, mas agora precisa entender e verificar como retrair um site pela resolução aumentar.
• Existe com base nessa ideia acima, um erro do uso de javascript por script apresentado em login
• Existe uma tentativa de elaborar um layout de form login aqui
• Calculadora e funções em JS são apresentadas aqui

O que falta desenvolver ainda

• Entender melhor como minificar arquivos - conforme está nos ultimos minutos desta aula
• Desenvolver Forms
• Estudar Background com imagens
• Integrar Forms com DB MySQL e DB Mongodb
• Verificar Meios de realizar autenticação
• Verificar meios de criar buscador
• Verificar meios de criar page/blog/post no estilo noticia para consulta
• Procurar meios de criar SEO e optimizações de páginas e consultas