【Udemy中英字幕】Next JS & WordPress: Build rapid NextJS sites with Next & WP

Next JS 和 WordPress：使用 Next 和 WP 快速构建 NextJS 网站

Next JS 和 Headless WordPress：使用 Next.js 和 WordPress 构建功能齐全的房地产网站 ~Next 2023

讲师：Tom Phillips

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

提高你作为前端/React JS 开发人员的价值并提升你的知识
学习 Next JS
使用 Next JS（带有 React JS 和 GraphQL）创建一个静态的、服务器编译的、内容驱动的网站
了解如何使用 GraphQL 和 GraphiQL 查询存储在 WordPress 中的数据
将 WordPress 设置为后端来构建内容，然后使用 React JS 和 GraphQL 将内容呈现为页面
使用 Vercel 部署您的 Next JS 静态网站并在内容发生变化时重建
了解如何使用 Tailwind CSS 为 Next JS 应用设计样式
了解如何使用 ACF pro 创建自定义 Gutenberg 区块
使用 React Context 和 React Hooks
创建自定义 React hooks
使用 Next JS 创建 API 端点

探索相关主题

Next.js
Web 开发
发展

要求

对 React JS 有基本的了解

描述

2023 年 9 月更新：本课程使用 Next JS 页面目录，但添加了一个全新的部分来介绍如何使用 Next JS 13.4 和应用程序目录，特别是将页面目录转换为应用程序目录。

你想提高你的 React JS 技能并提升你作为前端开发人员的价值吗？

通过学习具有 Headless WordPress 后端的 Next.js 来提升您的 React 技能！我们将在 Next JS 中构建的网站使用 React JS 和 GraphQL 从给定的数据集生成和构建静态页面。本课程将介绍如何将 WordPress 设置为无头 CMS，同时使用 NextJS 从 WordPress 数据（例如自定义帖子类型、页面、菜单、媒体、高级自定义字段（等等！））生成超快的服务器渲染 React 网站，并使用 GraphQL 查询该数据。

没错，我们实际上可以使用 GraphQL 查询 WordPress 数据！

在本课程中，我们将创建一个房地产经纪人物业网站，查看 Next JS 和 WordPress 的本地初始设置和开发，将 Gutenberg 块映射到 React 组件，创建我们自己的自定义 Gutenberg 块，使用 Tailwind CSS 设置这些组件的样式，并使用 GraphQL 查询 WordPress 和 Gutenberg 数据以自动生成我们的静态页面。

我们将了解如何使用 GraphiQL 浏览器工具通过 GraphQL 查询 WordPress 数据。我们也会接触一些 WordPress 代码，但不会太多 – 这里主要关注的是 Next JS。一旦我们熟悉并习惯使用 NextJS 和 WordPress 进行开发，我们将继续使用 Vercel 设置和部署实时网站，该网站每次我们在 WordPress 后端更新内容时都会使用 webhook 重新构建我们的静态网页。

建议您对 React 有基本的了解。我们将介绍 Next.js、WordPress、GraphQL 和 Tailwind CSS 的所有内容！

加速超越竞争对手！

Next.js 可以构建速度最快的网站。我们无需等待请求时生成页面，而是使用 Next JS 中的静态生成函数预先构建页面并将其提升到全球服务器云中（我们将为此使用 Vercel） – 随时可以立即交付给您的用户，无论他们身在何处。