Next.js by Example

使用 React 和 Next.js 开发静态网站和混合(静态+SSR)网络应用程序,包括 Tailwind CSS、React Query

你将会学到的

  • 使用 Next·js 开发 Web 应用
  • 使用 styled-jsx 或 Tailwind CSS 设置组件样式
  • 构建完全静态的网站或混合(静态 + SSR)应用程序
  • 从远程 API 获取数据,例如 Headless CMS
  • 实现基于 cookie 的 JWT 身份验证
  • 使用 React Query 缓存数据

要求

  • 熟悉现代网络开发:HTML、CSS、JavaScript、npm
  • 熟悉 React,包括 useState 和 useEffect 钩子

说明

Next.js被描述为“用于生产的 React 框架”,可以轻松地在 React 中构建高度优化的 Web 应用程序。

本课程将通过开发两个示例来指导您学习 Next.js:一个完全静态的网站和一个混合(静态 + 服务器端呈现)应用程序

第一个示例是一个个人博客网站,它将向您介绍基本的 Next.js 概念,例如预渲染基于文件系统的路由水化

它将向您展示如何在构建时静态生成的页面中加载数据,以及如何在全局 CSS 文件中或使用提供组件范围样式的styled-jsx库设置页面样式。

部署部分将为您提供在生产环境中运行应用程序的所有选项,从完全托管的无服务器平台(如Vercel)到配置您自己的 Linux 服务器。

您将开发的第二个示例是商店网站。这将是一个更复杂的应用程序,它从Headless CMS ( Strapi ) 加载数据并使用高级 Next.js 功能(例如增量静态再生)来自动反映后端数据的变化。

如果您愿意,它将向您展示如何在 Next.js 项目中启用TypeScript支持。使用 TypeScript 是可选的;除一个视频外,所有视频都使用纯 JavaScript。但如果您更喜欢 TypeScript,您可以在 GitHub 存储库中找到商店示例的完整 TypeScript 代码。

该网站将使用流行的Tailwind CSS库进行样式设计,并使用Next Image组件进行图像优化。

您将看到从外部 API 加载数据的不同方法,包括在 Next.js 中编写您自己的API 路由,以及如何根据您的特定要求选择最佳方法。

该示例将包括一个基于JWT和 cookie 的安全身份验证系统,并且React Query库将用于在客户端缓存数据。

提供了所有示例的完整源代码,并提供了一种简单的方法来查看每节课中所做的更改。

该课程可以跟随最新的 Next.js 13。请注意,不包括实验性功能,如 beta应用程序目录。

此课程面向哪些人:

  • 想要使用 Next·js 构建静态或混合(静态 + SSR)Web 应用程序的 React/Web 开发人员
声明:本站所有资源、素材等全部来源于互联网,赞助VIP仅用于对IT资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
TheItzy » Next.js by Example