|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjs-by-example/
课程评论：没有评论
**"Next.js by Example" 课程总结** 本课程深入讲解了 React 框架 Next.js，从基础到高级应用，并贯穿一个完整的项目开发。课程分为四个主要部分： **第一部分：Next.js 作为静态站点生成器** * **核心概念：** 文件路由、预渲染 (Prerendering)、React Server Components、Server Components 与 Client Components 的区别、Server Components 中的数据获取。 * **实用技术：** 使用 Tailwind CSS 进行样式设计、嵌入自定义字体、优化页面 SEO（元数据）。 * **部署：** 介绍 Vercel 等托管平台以及静态导出到任何 Web 服务器的部署方式。 **第二部分：Next.js 作为全栈框架** * **高级特性：** 动态渲染、时间/按需数据重新验证 (Revalidation)。 * **全栈实践：** 集成 Headless CMS (Strapi)，通过 REST API 调用和数据更新实现前端页面同步。 * **性能优化：** Image Optimization（按需图片转换、缩放、懒加载）。 * **组件集成：** 集成第三方 UI 组件，以及 Client-Side Data Fetching 的适用场景。 **第三部分：数据库集成与表单处理** * **数据库交互：** 使用 Prisma ORM 和 SQL 数据库进行数据集成。 * **表单处理：** 利用 Server Actions 处理表单提交。 * **性能提升：** 通过 Streaming 和 Suspense 优化页面加载。 **第四部分：身份验证与安全** * **用户认证：** 实现典型的登录流程，使用 Cookies 和 JSON Web Tokens。 * **用户数据管理：** 在数据库中存储用户数据。 * **内容访问控制：** 限制特定内容只对已认证用户可见。 **额外亮点：** * **更新内容：** 课程已更新以涵盖 Next.js v14 中稳定的 Server Actions，以及 v13.4 中稳定的 App Router 功能。 * **学习路径：** 前 13 小时专注于 App Router，其余部分讲解仍受支持的 Pages Router。 * **语言选择：** 支持 JavaScript 和 TypeScript。 * **学习资源：** 提供完整的源代码，并方便查看每个讲座的修改内容。 本课程旨在通过实践，帮助学习者循序渐进地掌握 Next.js 的各项强大功能，构建高度优化的 Web 应用程序。
Update: the course now also covers Server Actions, made stable in Next.js v14 (released Oct. '23), in addition to the other App Router features stable since Next.js v13.4 (May '23). The first 13 hours explain the App Router, and the rest the older - but still supported - Pages Router.Dubbed as "The React Framework for the Web", Next.js makes it easy to build highly optimized web applications by server-side rendering React components.This course will guide you through learning Next.js by developing a complete project step by step.Part I will show you how to use Next.js as a Static Site Generator, prerendering all your pages to static HTML, CSS, and JavaScript.This will teach you fundamental Next.js concepts such as file-based Routing, Prerendering, React Server Components, the differences between Server and Client Components, and how to fetch data in Server Components.It will also use the popular Tailwind CSS framework for styling, demonstrate how to embed Custom Fonts into your application, and how to make your pages more SEO-friendly with metadata.The Deployment section will present you the various options for running your application in production, from using a fully-managed platform like Vercel to performing a Static Export that can be uploaded to any web server.Part II will show you how to use Next.js as a Full-Stack Framework, enabling features such as Dynamic Rendering, Time-based Revalidation, and On-demand Revalidation.It will use a Headless CMS - Strapi - to store data, and demonstrate how to call its REST API from the Next.js app, and the various options for updating the frontend pages when the data in the CMS changes.It will also cover Image Optimization, showing how Next.js can convert and resize your images on-demand, and enable lazy-loading by the browser.It will then demonstrate how to integrate third-party UI components in your app, and when it can still make sense to use Client-Side Data Fetching.Part III provides an example of Database Integration, using the Prisma Object/Relational Mapper and an SQL database. It then explains how to process form submissions with Server Actions, and how to optimize page loads use Streaming and Suspense.The final part adds Authentication, showing how to implement a typical Sign In flow using Cookies and JSON Web Tokens, store users' data in a database table, and restrict content to authenticated users.You can follow the example using either JavaScript or TypeScript. The full source code is provided, with an easy way to see the changes made in every lecture.
