Visão Geral

Curso Next.js, Aprenda a construir aplicativos da web de produção com JavaScript e Next.js.

Nosso Curso Next.js é direcionado a desenvolvedores que buscam produzir aplicativos de alto desempenho usando Next.js, uma estrutura React construída em JavaScript que combina os pontos fortes de aplicativos de página única com renderização do lado do servidor (SSR).

com este Curso Next.js você vai adquirir, experiência prática na criação de páginas estáticas e dinâmicas, aprenderá as maneiras mais eficientes de buscar dados para seu caso de uso, otimizará a entrega de imagens - e terá um bom desempenho em mecanismos de pesquisa para SEO e análises graças ao SSR. 

Guiado por um instrutor especialista, você aprenderá por meio de exercícios práticos que refletem cenários do mundo real.

Objetivo

Após realizar este Curso Next.js, você será capaz de:

• Construir e implantar aplicativos React em Next.js
•  Como estruturar seu código React no contexto de um aplicativo Next.js.
•  Crie páginas estáticas e dinâmicas em Next.js
•  Entenda como o roteamento e o histórico do navegador são tratados no Next
•  Use estratégias eficientes para busca de dados
•  Crie aplicativos que gerenciem bem a otimização de imagens
•  Crie aplicativos que tenham ótimas análises e SEO
•  Adicionar endpoints de API do lado do servidor
•  Trabalhe com formulários no React
•  Decida a melhor estratégia de autenticação para seu caso de uso
•  Use as melhores práticas de teste com React Testing Library
•  Tenha uma estratégia de gestão de estado eficiente
•  Motivo sobre funções de pré-renderização e sem servidor com Next

Publico Alvo

• Este curso é direcionado a desenvolvedores que buscam construir aplicativos prontos para produção com a estrutura Next.js e React, usando JavaScript
  

Pre-Requisitos

• Os participantes deste curso, devem ter alguma familiaridade com os fundamentos de JavaScript HTML e CSS
• Examinaremos alguns conceitos fundamentais no início do curso para garantir que você obtenha o máximo valor de seu treinamento.

Materiais

Conteúdo Programatico

Key JavaScript Concepts

1. Arrow functions
2. List comprehensions (map, filter, reduce)
3. Hoisting and scopes
4. Spreading and destructuring
5. The event loop
6. Promises and async/await

Introduction to Next.js

1. React overview
2. Client and server side rendering
3. File structure and routing
4. Benefits and future

Hooks in React

1. What are hooks?
2. useState
3. useEffect

Functional Components

1. What are functional components?
2. Props and children
3. Inheritance and composition

Styling

1.  Overview of the diverse landscape
2.  Getting setup with Tailwind and purgecss

Special Next.js functionality

1.  getInitialProps
2.  getServerSideProps
3.   Custom _app.js and _document.js files

Handling state

1. Prop drilling, context sharing and hooks
2. UI state vs server state
3. React-query and the stale-while-revalidate approach

Serverless API Routes

1.  How do they work?
2.  Interacting with 3rd party services
3.  Keeping secrets from clients

Successful applications

1. Working with forms in React
2. SEO and analytics
3. Image optimisation

Security and authentication

1. Security and authentication in a serverless world
2. Authentication with Auth0
3. Protecting API routes

Testing and error handling

1.  Custom error and 404 pages
2.  Best practices with react-testing-library

Further topics for extended / customised Next.js training for your team - get in touch for more details

1. Higher level:
2. Build static sites with Next
3. Handle errors well with Sentry

Syllabus level:

1. Static vs dynamic sites
2. useContext
3. Custom hooks
4. Other styling approaches
5. getStaticProps
6. getPaths
7. Integrating with Sentry