- Visão geral do projeto
- Sobre o projeto
- Tecnologias utilizadas
- Instalação e utilização
- Anotações Pessoais
O ig.news é uma página de noticias sobre o universo React. Os usuários poderão realizar a assinatura dos conteúdos por apenas $9.90 ao mês. Antes de realizar uma assinatura na aplicação, o usuário deverá se cadastrar através do login com github. Logo após, será possível assinar os conteúdos, onde o pagamento é feito através de cartão de crédito pela plataforma do Stripe.
Caso o usuário não tenha uma assinatura de conteúdo na aplicação, ele ainda poderá ter acesso a listagem de postes, podendo fazer uma breve leitura dos postes de seu interesse, como mostrado na imagem acima.
As principais tecnologias utilizadas na construção deste projeto foram:
Ferramentas necessárias para execução do projeto
- Node
- Yarn
- Stripe CLI
- Baixe as dependências do projeto com o comando
$ yarn. - Crie o arquivo
.env.local, tendo como exemplo o arquivo.env.example. - Preencha os valores das variáveis ambiente do arquivo
env.local:
- Para ouvir os Webhooks do stripe, incie a CLI com o comando
$ stripe listen --forward-to localhost:3000/api/webhooks.
- Execute o projeto com o comando
$ yarn dev. localhost:3000
Onde as imagens e o favicon devem estar. Para carregar imagens dentro do projeto basta indicar o seguinte caminho no atríbuto src da img da seguinte forma: /images/logo.svg
A pasta SRC não existe de forma padrão em um projeto Nextjs, mas é possível cria-la para que haja uma melhor organização no código.
A pasta PAGES pode estar em apenas dois locais da nossa aplicação, sendo na raiz do projeto, ou diretamente dentro da pasta SRC.
Em projetos Nextjs, cada arquivo presente dentro da pasta PAGES é convertido em uma rota da aplicação, existem excessões como o _app.tsx e _document.tsx, que serão abordadas a seguir.
Quando criamos um componente dentro da pasta PAGES, o mesmo deve ser exportado como DEFAULT.
O arquivo _app.tsx é o primeiro arquivo a ser carregado pela aplicação, e cada alteração de tela no browser o mesmo é recarregado de forma completa. Nele devem estar contidas todas as informações de PROVIDERS (hooks wrappers). Se em algum momento existir um componente que deve estar presente em todas as abas da aplicação, o mesmo também deverá estar presente dentro deste arquivo, um exemplo prático seria o header.tsx. No caso do ignews o header está presente em todas as abas então o mesmo deve ser carregado dentro do app.
O arquivo _document.tsx funciona de forma semelhante ao _app.tsx, e também pode ser comparado ao arquivo index.html dentro da pasta PUBLIC em projetos React comuns. Nesse arquivo devem estar contidas informações que serão carregadas APENAS UMA VEZ na aplicação, um exemplo prático disso seriam as fontes. O código dentro do arquivo deve ser escrito no formato de CLASS, pois ainda não há um suporte muito legal a FUNCTIONAL COMPONENTS.
Entre a camada do browser e a camada do backend, existe a camada do Nextjs, que executa o servidor Node. Essa camanda permite que em alguns casos um backend dentro do frontend seja criado. A API ROUTE pode conter variáveis ambiente que não estarão disponíveis para o cliente. Cada arquivo dentro da pasta /pages/api pode ser comparado a uma rota do backend. Todas as API ROUTES são executadas utilizando o conceito de Serverless, dessa forma, a cada requisição executada uma nova estância é criada, divergindo do que acontece com as sessões nos métodos mais convencionais.
Ao nomear os arquivos das rotas é possível indicar se a mesma vai receber algum parâmentro ou não. Vamos imaginar que desejamos listar todos os usuários da aplicação, para isso basta criar um arquivo /api/users.ts. Caso seja necessário fazer uma busca por um usuário específico, o arquivo poderia se chamar /api/[userId].ts, e para resgatar o valor dentro do arquivo seria da seguinte forma: const {userId} = request.query. Para obter-se acesso a vários parâmentros da rota ao mesmo tempo, o arquivo deve ser nomeado usando spread operator: /api/[...params].ts, onde os resultados do request.query formam um objeto de parâmetros.
Devem estar disponíveis apenas para a parte backend do app. Dessa forma apenas as API routes, os métodos Server Side Rendering e os métodos Get Static Props devem visualizar as informações das variáveis. Pois as mesmas não devem ficar visíveis para o cliente
// formatanado json no console.log
console.log(JSON.stringify(response, null, 2))
// clonando elemento React
return (
<Link {...rest}>
{cloneElement(children, { className })}
</Link>
)
// inserindo html perigosamente
<div dangerouslySetInnerHTML={{ __html: post.content }} />