Aprenda a criar um portal de notícias com tecnologias web em um curso que abrange fullstack. 

O curso ensina como criar um website com componentes de React gerados no servidor pelo Next.js. O framework Next.js é muito bom para “search engine optimization” (SEO), otimização de busca, porque o aplicativo de React é construído no lado do servidor e o código já renderizado enviado ao cliente. Esse paradigma se chama aplicativo web isomórfico (“isomorphic web application” no inglês). Em vez de receber uma estrutura de HTML vazia, o cliente já recebe o conteúdo pre-renderizado do servidor. O cliente apenas reconstrói o aplicativo através do processo de hidratação (hydrate no inglês). Depois da primeira requisição que foi renderizada pelo servidor através de “serverside rendering”, o aplicativo age como se fosse de página única (“single-page application” ou SPA). Isto é, a página inteira não é requerida novamente ao servidor, mas apenas as partes de informaćão necessárias para modificar a interface de usuário já existente e transformá-la para um novo estado. 

Para a interface de usuário, o curso usa componentes de React escritos na maneira de Semantic UI. Isso é para não ter que escrever classes e folhas de estilo de CSS do zero.

O curso também ensina como criar uma API que serve dados no formato JSON. Esse backend é escrito em Node.js, que é o JavaScript no lado do servidor. O framework usado é o Express, que permite o estabelecimento fácil e rápido  de um servidor web. 

Para o banco de dados, o curso usa o PostgreSQL, que é um tipo de database SQL bem popular hoje em dia.

Como Criar um Portal de Notícias com Next.js, Semantic UI React, Express e PostgreSQL

001f Como Criar um Portal de Notícias com Next.js, Semantic UI React, Express e PostgreSQL

Como Criar um Portal de Notícias: Criação do Aplicativo de Next.js para o Frontend

# Resumo do Curso: Criando um Website de Notícias

## Introdução
Neste curso, você aprenderá a construir um website de notícias simples. O site em questão é chamado "Gazeta do Mundutech", que apresenta uma lista de artigos ou notícias, onde cada retângulo representa uma notícia, e os títulos funcionam como links para uma página com o conteúdo completo.

## Arquitetura do Aplicativo
O aplicativo será estruturado da seguinte forma:
- **Front-end**: Utilizaremos o Next.js, um framework baseado em React que permite renderização no lado do servidor, melhorando a indexação para SEO (Search Engine Optimization).
- **Back-end**: O servidor será construído com Node.js e o framework Express, que fornecerá uma API em formato JSON.
- **Banco de Dados**: Usaremos PostgreSQL como nosso sistema de banco de dados.

### Ferramentas e Estruturas
- **Front-end**: Desenvolvido em JavaScript, usando Next.js. A interface do usuário será feita em Semantic UI React, mas você pode usar outro framework de sua preferência, como Bootstrap.
- **Back-end**: Node.js e Express.
- **Dependências**: Você precisará do Node.js e NPM, que será usado para gerenciar as dependências do projeto. 

## Instalação e Configuração
1. **Instalação do Node.js e NPM**: Requer instalação utilizando o terminal do sistema operacional (ex: Ubuntu).
2. **Configuração do Projeto**: Criação do diretório para o projeto Next.js, inicialização do NPM e instalação das dependências necessárias (React, React DOM e Next).
3. **Estrutura de Pastas**: O Next.js requer uma estrutura específica, onde as páginas são criadas dentro da pasta `pages`.

### Criação de Páginas
- **Página Inicial**: Criada um componente funcional chamado `index.js` que renderiza um conteúdo básico.
- **Roteamento**: O Next.js utiliza a estrutura de arquivos para criar rotas; por exemplo, `pages/noticias/index.js` será acessível através da URL `/noticias`.

## Funcionalidades do Site
- **Index de Notícias**: Criar uma página para listar notícias.
- **Página de Artigo**: Cada artigo terá uma página atingida através de uma URL dinâmica (ex: `/artigos/[slug]`), onde `slug` representa um identificador único em palavras-chave da URL para SEO.

### Acessando Rotas Dinâmicas
- Usar o hook `useRouter` do Next.js para acessar parâmetros da URL, permitindo obter o conteúdo do artigo baseado no slug fornecido na rota.

## Conclusão
O curso abrange tanto a criação do front-end quanto a configuração do back-end, utilizando tecnologias modernas que otimizam a experiência do desenvolvedor e do usuário final. O foco é seguir os padrões do Next.js para garantir uma performance eficaz e uma boa indexação em mecanismos de busca.

Se houver dúvidas ou perguntas, sinta-se à vontade para deixá-las nos comentários. Aproveite a aprendizagem e não esqueça de ativar as notificações para as próximas aulas!

001f-01 Como Criar um Portal de Notícias: Criação do Aplicativo de Next.js para o Frontend

Layout, Link, Card e Breadcrumb: Como Usar o Semantic UI React com o Next.js

# Resumo da Aula - Criando um Portal de Notícias com Next.js

## Visão Geral
Na aula atual, o foco é no desenvolvimento do frontend do aplicativo de um portal de notícias usando Next.js, Semantic UI React, Express e PostgreSQL. O apresentador inicia pela configuração do ambiente de desenvolvimento e pela implementação de layouts reutilizáveis nas páginas do aplicativo.

## Principais Tópicos Abordados

1. **Configuração do Script de Desenvolvimento**:
   - O comando `npx next dev` foi substituído por um atalho no arquivo `package.json` que permite usar `npm run dev` para iniciar o servidor de desenvolvimento.

2. **Criação de Layouts com Next.js**:
   - O arquivo `_app.js` foi criado para definir um layout que será reutilizado em todas as páginas, contendo um header, o conteúdo dinâmico e um footer.
   - O layout permite que elementos comuns, como o título do site, sejam definidos uma única vez.

3. **Implementação do Semantic UI React**:
   - O Semantic UI React foi integrado para facilitar a estilização do site, evitando a escrita extensa de CSS manual.
   - O processo de instalação do Semantic UI e do CSS foi demonstrado.

4. **Uso de Componentes de Cartão**:
   - Os artigos foram apresentados como cartões utilizando o componente `Card` do Semantic UI.
   - A estrutura do cartão inclui o `Card.Header` para o título do artigo e outras propriedades para uma melhor apresentação.

5. **Navegação com Links**:
   - A navegação entre as páginas foi implementada usando o componente `Link` do Next.js.
   - Um breadcrumb foi adicionado para ajudar na navegação e na identificação de onde o usuário se encontra dentro da estrutura do site.

6. **Exemplos Práticos**:
   - A implementação de links dinâmicos foi realizada através da modificação do título dos artigos e da navegação entre diferentes páginas.

7. **Manutenção do Código**:
   - Comentários sobre a importância de evitar a repetição de código e otimização do projeto foram feitos, assim como boas práticas para importar componentes e folhas de estilo.

## Conclusão
A aula oferece um panorama detalhado sobre como configurar um projeto web com Next.js e Semantic UI React, focando em estruturação de layouts, navegação, e estilização com componentes prontos. O apresentador encerra pedindo feedback e sugestões dos participantes.

---

**Agradecimentos**:
- O apresentador convida os participantes a deixar seus comentários e se inscrever no canal para futuras atualizações.

**Nota**: Para continuar aprendendo e implementando as técnicas apresentadas, é importante praticar e experimentar com o código.

001f-02 Layout, Link, Card e Breadcrumb: Como Usar o Semantic UI React com o Next.js

Redirects no Next.js e Como Injetar Dados via Props com getStaticProps e getStaticPaths

```markdown
# Resumo da Aula: Criando um Portal de Notícias com Next.js

Nesta aula, continuamos o desenvolvimento do nosso portal de notícias usando Next.js e outras tecnologias.

## Problemas e Soluções

- **Erro de Propriedades em Breadcrumb**:
  - A mensagem de erro indicando que a propriedade `href` da seção de breadcrumb conflita com a propriedade `link` foi resolvida removendo-se a propriedade `link`.
  
- **Redirecionamento**:
  - Implementamos um redirecionamento automático de `/` para `/artigos` usando o arquivo de configuração `next.config.js`, configurando a função de `redirects`.

## Implementação de Redirects

- O redirecionamento foi feito no tempo de construção (build time), e conseguimos configurar usando um objeto com `source`, `destination` e `permanente`.

- Quando o redirecionamento levou a um bug ao usar links, decidimos que um redirecionamento em tempo de execução (runtime) também seria necessário, especialmente quando a página já existia.

## GetStaticProps e Dinamicidade

- Aprendemos a usar `getStaticProps` para injetar conteúdos dinâmicos na página, permitindo que os artigos sejam renderizados de maneira mais realista.

- **Estrutura de Código**:
  - A estrutura do código foi melhorada com a utilização de `map` e `props` relacionadas a artigos.

## Aproximação do Mundo Real

- Para tornar o código mais similar a um ambiente de produção, criamos um arquivo de dados `artigos.js`, onde armazenamos todas as informações dos artigos.

- **Uso de GetStaticPaths**:
  - Com `getStaticPaths`, garantimos que todas as rotas dinâmicas para os artigos fossem tratadas corretamente, reduzindo a necessidade de digitar manualmente cada rota.

## Manuseio de Erros

- Discutimos como lidar com casos de não encontrados (404) e a importância da propriedade `fallback` no `getStaticPaths`.

## Expansão do Conteúdo

- A aula culminou em tornar o conteúdo dos artigos mais dinâmico e flexível, e também abrimos a discussão sobre como utilizar Markdown para apresentação do conteúdo, aumentando a segurança contra XSS.

## Conclusão

A aula demonstrou como configurar redirecionamentos, manejar rotas dinâmicas, injetar dados via `getStaticProps` e estruturar o projeto para refletir um aplicativo real que poderia utilizar um banco de dados. Para a próxima aula, o foco será no gerenciamento mais avançado desses dados e como apresentá-los de forma segura e eficiente.

## Chamadas à Ação

- Não se esqueça de curtir, comentar, se inscrever e ativar as notificações para mais aulas.
```
