Visão Geral

Este curso apresenta os fundamentos de SSR (Server-Side Rendering) usando Next.js, mostrando como React pode entregar páginas mais rápidas, otimizadas para SEO e com experiência profissional desde o primeiro acesso. Você aprenderá a estruturar projetos, criar rotas, usar dados no servidor e gerar páginas híbridas.

Objetivo

Após realizar este curso, você será capaz de:

• Entender como SSR funciona na prática
• Criar projetos estruturados usando Next.js
• Implementar rotas, páginas e componentes com renderização no servidor
• Consumir dados usando getServerSideProps e getStaticProps
• Criar sites rápidos, escaláveis e otimizados para mecanismos de busca
• Entregar aplicações híbridas com SSR, SSG e CSR

Publico Alvo

• Iniciantes em Next.js
• Devs React que querem aprender SSR
• Criadores de sites rápidos e otimizados para SEO
• Profissionais buscando entrar no ecossistema moderno de React

Pre-Requisitos

• JavaScript básico
• React básico
• Noções de consumo de APIs

Conteúdo Programatico

Module 1 — Introduction to Next.js & SSR

1. What is Server-Side Rendering?
2. Benefits of SSR vs. CSR
3. Overview of the Next.js ecosystem
4. Installing and initializing a new Next.js project

Module 2 — Pages and File-based Routing

1. Understanding the pages/ folder
2. Automatic route creation
3. Dynamic routes with brackets
4. Nested routes and URL parameters

Module 3 — Rendering Models (SSR, SSG, CSR)

1. When to use SSR
2. When to use SSG
3. When CSR is still relevant
4. Combining multiple rendering strategies

Module 4 — Data Fetching Fundamentals

1. getServerSideProps (SSR data)
2. getStaticProps (SSG data)
3. getStaticPaths (dynamic static pages)
4. Passing props securely to pages

Module 5 — Layouts and Components

1. Creating reusable components
2. Shared layouts with _app.js and layout patterns
3. Adding metadata with Head
4. Global styles and CSS Modules

Module 6 — Navigation and Links

1. Using the Link component
2. Client-side navigation
3. Prefetching pages
4. Improving navigation performance

Module 7 — Image Optimization

1. Using Next.js Image component
2. Automatic resizing and compression
3. Configuring allowed image domains

Module 8 — API Routes Basics

1. Creating backend endpoints inside Next.js
2. Understanding API folder structure
3. Handling requests/responses
4. Connecting API routes to frontend pages

Module 9 — Deployment & Production Build

1. Running next build and next start
2. Setting environment variables
3. Deploying on Vercel
4. SEO checklist for production deployment

Module 10 — Mini Project

1. Building a complete SSR website
2. Fetching live API data
3. Implementing dynamic pages
4. Deploying the final project online