|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjs-do-zero-ao-avancado-com-projetos/
课程评论：没有评论
**课程名称：Next.js 从零到高级项目实战** **课程概述：** 本课程是为希望掌握基于 React 的强大 Web 开发框架 Next.js 的学习者量身定制。课程将带您从入门到高级，全面学习如何构建完整、可扩展且高性能的 Web 应用程序。 **课程内容亮点：** * **Next.js 导论：** 深入理解 Next.js 相较于 React 的优势，配置开发环境，创建首个项目，探索目录结构，并比较服务器端渲染 (SSR) 与客户端渲染 (CSR)。 * **页面与导航：** 学习基于文件的路由系统，页面间导航，带参数的动态路由，嵌套路由和可复用布局。掌握 `useRouter` hook，理解服务器组件与客户端组件 (`use client`) 的区别，以及 `redirect` 函数的用法。 * **样式化：** 涵盖全局 CSS、CSS Modules，集成 Tailwind CSS 和 SASS。还将介绍 CSS-in-JS 的各种实践。 * **数据获取与服务器 Actions：** 学习使用 Prisma 设置项目，创建表单，进行数据的插入和检索。理解客户端组件与服务器组件的交互，处理加载状态、404 页面以及前后端验证。课程包含一个实践项目来巩固知识。 * **Next.js 缓存机制：** 深入了解路由缓存、基于时间的缓存验证、缓存清除策略以及 `revalidatePath` 函数的应用，以优化应用性能。 * **NextAuth.js 认证：** 学习如何集成 NextAuth.js 实现用户认证，包括配置 Google Provider，创建认证 API 路由，添加登录/登出按钮。利用中间件保护客户端和服务器端页面，并与 Prisma 数据库集成。 * **NextGram 项目实战：** 在课程最后，将通过一个仿 Instagram 的综合项目“NextGram”来应用所有学到的知识，实现用户认证、点赞、评论和帖子管理等功能。 **课程目标：** 完成本课程后，您将全面掌握 Next.js，并能够独立构建现代化、高性能的 Web 应用程序。
Seja bem-vindo ao nosso curso completo de Next.js! Se você está pronto para dominar este poderoso framework de desenvolvimento web baseado em React, você está no lugar certo. Este curso foi feito para levá-lo do nível básico ao avançado, capacitando você a criar aplicações web completas, escaláveis e de alto desempenho. Confira a seguir o que você vai aprender em cada etapa do curso:Introdução ao Next.jsNesta primeira seção, você será apresentado às principais vantagens do Next.js em relação ao React. Vamos configurar o ambiente de desenvolvimento, criar nosso primeiro projeto e explorar a estrutura de diretórios e arquivos. Além disso, abordaremos as diferenças entre renderização do lado do servidor (SSR) e renderização do lado do cliente (CSR), preparando você para um entendimento profundo do framework.Páginas e NavegaçãoAqui, vamos explorar como o roteamento funciona no Next.js. Você aprenderá sobre o roteamento baseado em arquivos, como navegar entre páginas, criar páginas dinâmicas com parâmetros, rotas aninhadas e layouts reutilizáveis. Também discutiremos o uso do hook useRouter para gerenciar a navegação e a diferença entre componentes de servidor e componentes com use client, além de como utilizar a função redirect.EstilizaçãoEsta seção aborda a estilização de aplicações em Next.js. Vamos começar com uma introdução aos diferentes tipos de estilos, como CSS global e CSS Modules, e também integrações com Tailwind CSS e SASS.Você ainda verá exemplos de CSS-in-JS para escolher a abordagem que melhor se adapta ao seu projeto.Fetch e Server ActionsFocaremos em como buscar dados e usar ações de servidor no Next.js. Você aprenderá a configurar projetos com Prisma, criar formulários, inserir e recuperar dados de bancos de dados e lidar com rotas dinâmicas. Também veremos a diferença entre componentes do cliente e do servidor e como integrá-los. Além disso, discutiremos estados de carregamento, páginas 404 e validação no front-end e back-end. Esta seção inclui um projeto prático para consolidar seu aprendizado.Cache no Next.jsNesta parte, vamos entender como o cache funciona e como otimizar suas aplicações para produção. Você aprenderá sobre cache de rotas completas, validação de cache baseada em tempo, remoção de cache e o uso da função revalidatePath para manter suas aplicações rápidas e eficientes.Autenticação com Next AuthVamos nos aprofundar na implementação de autenticação em Next.js com NextAuth.js. Começaremos configurando o Google Provider, criando rotas de API de autenticação e adicionando botões de login e logout. Você verá como proteger páginas tanto no lado do cliente quanto no servidor usando middleware, além de integrar com um banco de dados e concluir a configuração com Prisma.Projeto NextGramNa última seção, vamos aplicar tudo o que você aprendeu criando um projeto prático chamado NextGram. Esse projeto, inspirado no Instagram, inclui funcionalidades como autenticação, likes, comentários e gerenciamento de postagens. Com isso, você verá como conectar todos os pontos para construir uma aplicação real.Ao final do curso, você terá uma compreensão completa de Next.js e estará preparado para criar aplicações modernas e de alto desempenho.Pronto para começar sua jornada com Next.js? Te espero no curso!
