|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/build-unofficial-udemy-in-nextjs-v13/
课程评论：没有评论
**课程名称：使用 Next.js v13 构建非官方 Udemy 克隆应用程序** **课程概述：** 本课程将深入探索 React 框架的最新特性，重点关注 Next.js v13。通过学习本课程，您将能够构建一个功能全面的非官方 Udemy 克隆应用程序，掌握 Next.js 的核心概念和实战技巧。 **主要学习内容：** * **Next.js 13 的核心特性：** * App 目录（App Directory）：理解新的路由机制、目录结构以及 `page.js` 文件作为路由入口点。 * Pages 目录：回顾并使用经典的 Pages 目录进行项目开发。 * 数据获取（Data Fetching）：学习在 Next.js 13 中全新的数据获取方式，包括使用 Async Components 进行 Promise 驱动的渲染。 * **渲染策略：** * 客户端渲染 (Client Rendering) * 服务器端渲染 (Server Rendering)：理解服务器渲染的优势，包括性能提升和 SEO 优化。 * **路由：** * 嵌套路由 (Nested Routing)：掌握如何通过目录结构轻松实现复杂的路由配置。 * 文件即路由 (File-based Routing)：利用 Next.js 的文件系统自动生成路由。 * **组件模型：** * React Server Components：深入理解 Server Components 的概念，包括其在服务器端渲染、提升加载速度、减小 JavaScript 包大小以及利用缓存方面的优势。 * React Client Components：了解 Client Components 的使用场景，以及如何通过 `'use client'` 指令声明，并处理第三方库的集成。 * 混合使用 Server 和 Client Components：学习如何根据需求选择和组合使用这两种组件，实现最佳的性能和交互体验。 * **其他重要概念：** * 内置优化 (Built-in Optimization) * TypeScript 支持 * API Routes：构建后端 API。 * Middlewares：实现请求中间件。 * 部署 (Deployment)：学习如何将 Next.js 应用部署上线。 * CSS 样式：掌握各种 CSS 样式方案。 * 缓存 (Caching)：理解 Next.js 的缓存机制。 * 数据库集成：学习如何将应用程序与数据库连接。 **课程亮点：** 本课程将带您构建一个实际的 Udemy 克隆应用程序，让您在实战中学习和巩固 Next.js 的强大功能。您将深入了解 Next.js v13 带来的革命性变化，特别是 App 目录和 React Server Components，它们将极大地提升您构建现代化 React 应用的能力。
The React Framework for the WebUsed by some of the world's largest companies, Next.js enables you to create full-stack web applications by extending the latest React features and integrating powerful Rust-based JavaScript tooling for the fastest builds.In this course, You will learn all the latest features of Next.js like app directory, pages, data fetching in a new way.You will learn these concepts in this course:Client and Server RenderingNested RoutingData FetchingBuilt-in OptimizationTypescript supportAPI RoutesMiddlewaresDeploymentCSS stylingCachingUsing databaseOne of the main benefits of Next. js is that it enables server-side rendering. This means the server can generate the HTML for a page and send it to the client, rather than the client generating the HTML using JavaScript. This can improve the performance and SEO of your app.One of Next.js's best features is file-based routing. Instead of dealing with complicated route settings in a program like react-router, routes can be specified using the directory project structure. By adding an entry point to the directory page, you can create a new path.Next.js 13 includes updated file routing with the new directory. The optional app directory introduces a new layout structure as well as several new features and improvements.The directory structure has undergone minor changes due to the new routing mechanism. Each path in the route has a dedicated directory with a page.js file that serves as the content entry point in Next.js 13.What's most exciting about the new version of Next.js is the expanded support for React server components. Server components let us run and render React components on the server side for faster delivery, a smaller JavaScript bundle, and less expensive client-side rendering.In addition, depending on the kind of data required to generate a route, server components are automatically cached at build-time or runtime for added performance benefits.Combining server and client components allows you to use server components for fast-loaded, non-interactive parts of your program while using client components for interaction, browser APIs, and other features.When constructing client components for your Next.js application, you can designate them as such by using the ‘use client'; directive at the top of the file. However, if you utilize any third-party packages, you might need to create a client wrapper.In addition, Next.js 13 introduces async components, a fresh approach to data collection for server-rendered components. When using async components, we can render systems using Promises using async & await.
