Desenvolvimento Web de Alta Performance com Next.js e Supabase

Aprenda a Versão Mais Recente do Next.js com React 18 e Integração On-demand ISR com Supabase

Neste curso, você aprenderá sobre o desenvolvimento de aplicações web integrando Next.js e Supabase através de dois projetos. No Projeto 1, você se concentrará em implementar um aplicativo de tarefas com atualizações dinâmicas de dados usando SSG (SG) + CSF. Você também aprenderá sobre Web Vitals (TTFB, FCP, LCP) e entenderá a relação entre Web Vitals e SSG, SSR, SSG + CSF através de comparação e medição. No Projeto 2, você implementará um aplicativo de notas que alcança entrega rápida e atualizações de dados semi-dinâmicas usando On-demand ISR. Projeto 1: Aplicativo de Tarefas (Atualizações dinâmicas de dados com SSG+CSF) Projeto 2: Aplicativo de Notas (Entrega rápida e atualizações de dados semi-dinâmicas com On-demand ISR) Tecnologias utilizadas neste curso: - Next.js - Supabase - React-query: Gerenciamento de dados do servidor (cache) - Zustand: Gerenciamento de estado do cliente - Typescript - Tailwind CSS Tópicos de aprendizado abordados neste curso: - Como usar o Supabase (Criação de tabelas, RLS, relações, CASCADE Delete, etc.) - Integração do Next.js e Supabase (Autenticação, operações CRUD) - Gerenciamento de estado com React-query e Zustand - Entendendo os Web Vitals (TTFB, FCP, LCP) - Relação e medição de SSG (SG), SSR, SSG+CSF e Web Vitals - Entendendo todos os tipos de páginas do Next.js - Entendendo os problemas com ISR e implementando On-demand ISR (api/route, Supabase Function Hooks) - Entendendo o comportamento de pré-carregamento do next/link (com base em padrões de destino) - Entendendo o comportamento de atraso de acesso inicial da entrega estática (Edge CDN - X-Vercel-Cache) - Entendendo a Rede Edge durante as atualizações do ISR - Impacto das diferenças de região da função serverless da Vercel na resposta SSR (TTFB, LCP) - Rede Edge da Vercel - Demonstração do Middleware (teste A/B) no Next.js 12.2~ - Diferença na velocidade de resposta entre as rotas de API Edge (ε) e as rotas de API (λ) no Next.js 12.2~ O que você aprenderá: - Supabase (Tabelas, Autenticação, Relações, RLS, Function Hooks, CASCADE Delete) - Next.js (On-demand ISR, Função serverless (λ), Middleware, Rotas de API Edge (ε)) - Web Vitals (TTFB, FCP, LCP) - SSG, ISR, SSG+CSF, SSR - Gerenciamento de estado com React-query + Zustand - Rede Edge da Vercel