Salveeee beleza dev? Então nos últimos meses passei por algumas tarefas e objetivos pelo qual eu deveria criar um micro frontend usando uma tecnologia que tive-se : performance, SEO, indexação muitoooo boa. Ate que consegui chegar a um modelo que funcionou muito bem não so para o NEXTJS mas também para react usando o pivo como Nextjs hoje.Ah vale lembrar que deve sempre seguir a seguinte sequencia :1 - voce configura o base path nos /pasta ( projeto ) que vai usar o domínio principal como:no meu caso tenho APP / BLOG / WIDGET e o pivo que seria HOME.2 - depois voce enviar o build contendo as urls dos domínios /projetos que voce criou/configurou.next.config.js / BLOG<pre><code class="language-javascript">module.exports = {
	basePath: '/blog',
}</code></pre>depois que subir todos os projetos do micro frontend faça a seguinte configuração.next.config.js / HOME<pre><code class="language-javascript">const BASE_URL = {
	blog: 'https://sorteio-de-nomes.vercel.app',
	app: 'https://app-micro-frontend-base.vercel.app',
	reactjs:'https://app-reactjs-micro-frontend-base.vercel.app',
	widget: 'https://widget-two-black.vercel.app',
}

module.exports = {
 async rewrites() {
 return {
 fallback: [

 //Blog NextJS
 {
 source: '/blog',
 destination: `${BASE_URL.blog}/blog`,
 },
 {
 source: '/blog/:path*',
 destination: `${BASE_URL.blog}/blog/:path*`,
 },

 // App Nextjs
 {
 source: '/app',
 destination: `${BASE_URL.app}/app`,
 },
 {
 source: '/app/:path*',
 destination: `${BASE_URL.app}/app/:path*`,
 },

 // App ReactJS
 {
 source: '/reactjs',
 destination: `${BASE_URL.reactjs}/reactjs`,
 },
 {
 source: '/reactjs/:path*',
 destination: `${BASE_URL.reactjs}/reactjs/:path*`,
 },

 // Widget NextJS
 {
 source: '/:path*',
 destination: `${BASE_URL.widget}/:path*`,
 },
 }
 }</code></pre>Pronto, esta configurado seu micro-frontend em Nextjs. Link do projeto: <a href="https://github.com/EmersonGarrido/micro-frontend-base">https://github.com/EmersonGarrido/micro-frontend-base</a> Demo : <a href="https://vercel.com/emersongarrido/home-micro-frontend-base">https://vercel.com/emersongarrido/home-micro-frontend-base</a> Duvidas? manda no Instagram bora bater um papo sobre este projeto. &nbsp;&nbsp;

imagem_2022-09-27_154712288.png

Micro Frontend usando NextJS ( Nativo ) sem plugin

Micro Frontend NextJS

Nada melhor do que encontrar um dinheiro no chão não e mesmo? e o que dizer quando voce encontra um blog otimizado com backend completo prontinho somente para clonar e sair usando totalmente gratuito e com manutenção constante. <a href="https://github.com/EmersonGarrido/blog-emersongarrido.com.br">GitHub Frontend</a><a href="https://github.com/EmersonGarrido/backend-blog.emersongarrido.com.br">GitHub Backend</a> A ideia era clonar a ideia e alguns components do blog da Rocketseat e deixar open source para galera que quer seguir a mesma ideia que eu de compartilhar conteúdo e conhecimento, não tenho nenhuma intensão de causar problemas a ninguém apenas peguei a base da ideia dos cards dos posts e adicionei minha pitada de tempero. Contribua com repositório sobre melhorias de código ate mesmo em relação a performance.

imagem_2022-08-24_003422779.png

Projeto open source completo de backend + frontend deste blog inteirooooo

Blog e Backend completo open-source

Link do projeto: <a href="https://github.com/EmersonGarrido/create-videos-mp4">https://github.com/EmersonGarrido/create-videos-mp4</a> Não finalizei como gostaria mas esta liberado para vcs testarem como achar melhor. Irei atualizando conforme for melhorando o projeto.

i533291.webp

Gerador de Video MP4

Link do projeto: <a href="https://github.com/EmersonGarrido/gerate-contracts">https://github.com/EmersonGarrido/gerate-contracts</a> Em breve vou descrever mais coisas sobre este projeto, terei que rodar para lembrar de muita coisa… mas intenção era ter um sistema onde houve-se uma entrada de texto e depois via form pudesse ser gerado contratos automáticos… Duvidas? chama no Instagram @emersongarrido.dev

imagem_2022-09-27_165017851.png

Gerador de contratos

Link do projeto: <a href="https://github.com/EmersonGarrido/gerador-thumb-blog">https://github.com/EmersonGarrido/gerador-thumb-blog</a> Projeto usando API do NEXTJS para gerar uma imagem usando o puppeter tudo pelo frontend :) Pode ser usado para gerar thumb de imagens de postagens de blog ou afins. Ele gera QUALQUER imagem baseado em um HTML pre definido. Pensa num projeto que eu amo de paixão e uso em varias mas varias coisas as mesma técnica.

imagem_2022-09-27_164643289.png

Gerar uma imagem usando o puppeter tudo pelo frontend com NextJS

Gerador de Imagem Thumb Blog

+1 projeto open-source para vcs, este também e um projeto beeeem simples mas muito util no dia dia. Link do projeto : <a href="https://github.com/EmersonGarrido/my-homepage">https://github.com/EmersonGarrido/my-homepage</a> Querem que eu descreva melhor o projeto? manda uma DM no Instagram @emersongarrido.dev

xg-home-page.jpg

Home Page Pessoal

Link do projeto : <a href="https://github.com/EmersonGarrido/gerador-certificados">https://github.com/EmersonGarrido/gerador-certificados</a> Um amigo surgiu com um pequeno problema e não havia ferramenta gratuita para fazer tal coisa. Uma aplicação simples sem frontend que apenas pega o background de uma imagem e anexa os textos de um array para gerar um PDF deste certificado. &nbsp;O array pode ser importado depois via CSV ( não foi feito mas seria simples implementar ), e a partir dai ele gera os pdfs de todos os certificados. Poderia ficar horas explicando cada linha mas e tao simples que não vejo necessidade de fazer isto, caso tenha duvidas me grita no instagram : <a href="https://instagram.com/emersongarrido.dev">https://instagram.com/emersongarrido.dev</a>&nbsp;

imagem_2022-09-27_161040559.png

Gerador de certificados em NODEJS

Código do <a href="https://github.com/EmersonGarrido/miojoipsum.com">Github</a>&nbsp; &nbsp;<pre><code class="language-typescript">Em uma panela coloque o chuchu, batata e a cenoura e cozinhe por 10 minutos.</code></pre> Ta…. to zoando não vou ensinar aqui também a fazer um miojo né? mas vamos combinar que clonar este repositório criativo e melhorar ele não vai levar nem 3 minutos e acredito que vale a pena criar uma replica melhorada, afinal este site não foi eu que criei. Bom deixa eu explicar direito esta historia haha pois todo projeto tem suas historias e esta não e tao longa, em 2013 antes do Enem, pera esta parte da historia não e minha e voce pode consultar no google sobre a NOTA DO ENEM DO MIOJO. Estava eu a alguns meses atras em call com meus colegas de trabalho ate que um deles comentou sobre um site de 2013 que fez muito sucesso e saiu no jornal por conta da pontuação do Enem, não sei ao certo toda historia do site com o Enem mas sei que enquanto ele contava a historia eu ja havia comprado o domínio ( alguém deu bobeira e não pagou ) corri e comprei vi o rank no google e o site era bem visto ainda e existe muitos sites apontando e citando ele. Então corri e comprei e comecei a montar o projeto o difícil foi encontrar foto do site antigo para representar bem, com muito custo achei e comecei a codar para ficar igual, enquanto isto minha esposa estava escrevendo as receitas de miojo. Em poucas horas ( taaaa não demorei so 3 minutos ) eu estava com o site no ar e pronto para o mundo usar. Não tem ideia do quanto gratificador e voce desenvolver algo e ver o pexual usandooo. Não tem grana que pague esta alegria. Esta a historia atual do miojo :) Obrigado por ter ficado ate aqui

Captura de Tela 2022-08-24 às 00.44.40.png

 Cortei uns cubinhos de queijo prato e coloquei em cima para servir. Quando estiver fervendo coloque o miojo. Junte a cenoura cozida e o tomate e misture.

|

Blog

Blog do Emerson Garrido

Micro Frontend NextJS

Blog e Backend completo open-source

Gerador de Video MP4

Gerador de contratos

Gerador de Imagem Thumb Blog

Home Page Pessoal

Gerador de certificados em NODEJS

Miojo Ipsum open source para vocês

|

Blog

Faça uma doação

Blog do Emerson Garrido

Micro Frontend NextJS

Blog e Backend completo open-source

Gerador de Video MP4

Gerador de contratos

Gerador de Imagem Thumb Blog

Home Page Pessoal

Gerador de certificados em NODEJS

Miojo Ipsum open source para vocês