Criando um Blog com contador de visitas usando NextJS e MongoDB

Sempre queremos entregar a melhor experiência para nossa audiência.

Esse post vai ser um pouco mais complexo, fique a vontade para ler e seguir os passos. Se você tiver conhecimento prévio vai ficar mais tranquilo, também temos vários conteúdos no YouTube e no blog sobre os assuntos abaixo:

• NextJS
• MongoDB
• TypeScript

🏛️ Introdução

A arquitetura do NextJS é robusta, feita para criar aplicações em React. A API Routes permite criar API com NextJS, onde o NodeJS brilha ao rodar por baixo dos panos. Com isso podemos usar o MongoDB em uma aplicação usando um Front End NextJS.

Criação de blogs é um bom exemplo para o uso do NextJS. Ele tem seu próprio gerenciador de rotas, baseado em sistema de arquivos construído no conceito de páginas. Podemos criar rotas dinâmicas também.

A comunidade do NextJS abraçou o framework e vem criando vários exemplos e boilerplates bem interessantes para se basear e aprender a construir aplicações.

Para implementar nosso caso de uso vamos usar dois exemplos dos links abaixo:

• https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
• https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript

No código de exemplo já tem um blog bem bacana feito com NextJS, TypeScript, usando Tailwind para estilização e Markdown para criação estática dos posts.

Vantagem dessa estrutura é que você não vai precisar de um Back End para buscar os posts (API NodeJS, Prismic, Ghost, etc). A desvantagem é que a leitura de todos os posts de dentro do código vai ficar lenta, com isso se seu plano de hospedagem na Vercel ou Netlify for gratuita, você terá que migrar, mas também há outras soluções.

Passo 1 - Baixando o projeto

Comece baixando o projeto na sua workstation — pasta onde você deixa seus códigos:

npx create-next-app --example blog-starter-typescript blog-rocketseat // ou yarn create next-app --example blog-starter-typescript blog-rocketseat

Esse comando vai baixar o boilerplate do blog. Você pode dar o nome que quiser, basta trocar ali o blog-rocketseat.

O projeto do blog tem a seguinte estrutura:

blog-rocketseat on  master took 3s ❯ tree -h . ├── [ 96] @types │ └── [ 29] remark-html.d.ts ├── [2.2K] README.md ├── [ 160] _posts │ ├── [2.2K] dynamic-routing.md │ ├── [2.2K] hello-world.md │ └── [2.2K] preview.md ├── [ 640] components │ ├── [1.2K] alert.tsx │ ├── [ 322] avatar.tsx │ ├── [ 253] container.tsx │ ├── [ 639] cover-image.tsx │ ├── [ 278] date-formatter.tsx │ ├── [1.2K] footer.tsx │ ├── [ 307] header.tsx │ ├── [1.2K] hero-post.tsx │ ├── [ 681] intro.tsx │ ├── [ 407] layout.tsx │ ├── [ 251] markdown-styles.module.css │ ├── [1.2K] meta.tsx │ ├── [ 783] more-stories.tsx │ ├── [ 352] post-body.tsx │ ├── [ 961] post-header.tsx │ ├── [ 981] post-preview.tsx │ ├── [ 333] post-title.tsx │ └── [ 124] section-separator.tsx ├── [ 160] lib │ ├── [1.1K] api.ts │ ├── [ 327] constants.ts │ └── [ 214] markdownToHtml.ts ├── [ 75] next-env.d.ts ├── [ 715] package.json ├── [ 192] pages │ ├── [ 174] _app.tsx │ ├── [ 290] _document.tsx │ ├── [1.3K] index.tsx │ └── [ 96] posts │ └── [2.3K] [slug].tsx ├── [ 71] postcss.config.js ├── [ 128] public │ ├── [ 96] assets │ │ └── [ 192] blog │ │ ├── [ 160] authors │ │ │ ├── [6.0K] jj.jpeg │ │ │ ├── [7.0K] joe.jpeg │ │ │ └── [6.0K] tim.jpeg │ │ ├── [ 96] dynamic-routing │ │ │ └── [115K] cover.jpg │ │ ├── [ 96] hello-world │ │ │ └── [103K] cover.jpg │ │ └── [ 96] preview │ │ └── [ 43K] cover.jpg │ └── [ 384] favicon │ ├── [4.7K] android-chrome-192x192.png │ ├── [ 14K] android-chrome-512x512.png │ ├── [1.3K] apple-touch-icon.png │ ├── [ 255] browserconfig.xml │ ├── [ 595] favicon-16x16.png │ ├── [ 880] favicon-32x32.png │ ├── [ 15K] favicon.ico │ ├── [3.5K] mstile-150x150.png │ ├── [1.9K] safari-pinned-tab.svg │ └── [ 392] site.webmanifest ├── [ 96] styles │ └── [ 276] index.css ├── [ 692] tailwind.config.js ├── [ 484] tsconfig.json ├── [ 128] types │ ├── [ 74] author.ts │ └── [ 229] post.ts └── [275K] yarn.lock 16 directories, 55 files

Este blog é bem robusto e tem uma code base bem grandinha. Mas não se assuste, eu mesmo não li todo o código. Você não precisa conhecer cada arquivo e linha de código desse projeto para continuar.

Passo 3 - Instalando as Dependências e inicializando o Projeto

Execute yarn install só para garantir que a node_modules já está no projeto com as dependências instaladas.

Depois execute yarn dev para executar a aplicação e você terá o seguinte resultado:

blog aparecendo após a execução do comando: yarn dev

Navegue entre os posts, dê uma fuçada nas páginas e fique à vontade para ver a estrutura do projeto.

Seguindo, vamos instalar as dependências necessárias. Basicamente são duas:

• mongodb e @types/mongodb (driver de conexão com MongoDB para aplicações NodeJS)
• swr (stale-while-revalidate — hook para busca de dados)

yarn add mongodb swr

yarn add @types/mongodb -D

Passo 4 - Configurando a conexão com Mongo Atlas

Vamos configurar a conexão com o banco de dados no Atlas. Antes disso você precisa criar sua conta gratuita no serviço deles e criar um projeto — Projeto → Cluster → Collection.

Adicionar IP Access List Entry: 0.0.0.0/0 (pode colocar o endereço onde o app está executando — caso esteja hospedado)

Adicionando IP nas configurações do MondoDB

E também precisa de um usuário e senha para se conectar ao banco de dados:

Criando uma conta de usuário para acessar o banco de dados do MongoDB.

Depois você vai precisar obter e copiar a string de conexão com mongoDB:

mongodb+srv://meu_usuario:<password>@cluster.kwhje.mongodb.net/<dbname>?retryWrites=true&w=majority

Para conseguir essa string, acesse: Clusters → Connect → Connect your application (segunda opção) → Copy. Pronto!

Obtendo a string de conexão do Cluster (database) MongoDB

Esses dados são sensíveis, então vamos precisar configurar variáveis de ambiente para salva-los.

Na raiz do projeto crie o arquivo .env.local :

MONGODB_URI=mongodb+srv://meu_usuario:<password>@cluster.kwhje.mongodb.net/<dbname>?retryWrites=true&w=majority MONGODB_DB=blog_post_page_view # aqui é o nome do banco de dados

Com banco de dados e string de conexão na variável de ambiente, podemos avançar e configurar o driver de conexão entre MongoDB ↔ NodeJS.