使用 React 和 Node 完成 Next.js – 漂亮的投资组合应用程序

使用 Next.js 构建无服务器 Web 应用程序。学习钩子。部署到 Vercel。Next.js (Next JS 10+)、React (React 16+) & Node.js

讲师：Filip Jerga

独家Udemy付费课程，中英文字幕，课程资料包齐全！

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

你将会学到的

• 使用最新的 Next JS 和 React 开发无服务器和经典 Web 应用程序
• 通过创建真实世界的应用程序清楚地理解 Web 概念
• 创建 SEO（搜索引擎优化）和同构友好应用程序
• 在令人兴奋的 Next 和 React Web 开发环境领域建立自己

课程内容

29 个章节 • 446 个讲座 • 总时长 69 小时 44 分钟展开所有章节

介绍2 个讲座 • 13 分钟

【项目一】：启动项目8 个讲座 • 1 小时 2 分钟

【项目一】：状态与道具9 个讲座 • 1 小时 25 分钟

[项目1]：布局7 个讲座 • 53 分钟

【项目一】：数据抓取8 个讲座 • 1 小时 18 分钟

[项目 1]：表单和创建资源7 个讲座 • 48 分钟

[项目1]：发布请求9 个讲座 • 48 分钟

【项目一】：资源详情8 个讲座 • 57 分钟

【项目一】：资源编辑5 个讲座 • 41 分钟

【项目一】：活动资源7 个讲座 • 58 分钟

[项目 1]：用户体验改进7 个讲座 • 57 分钟

【项目一】：部署5 个讲座 • 42 分钟

【项目2】：Starter（无服务器）25 个讲座 • 3 小时 38 分钟

【项目2】：认证21 个讲座 • 3 小时 4 分钟

[项目 2]：投资组合功能45 个讲座 • 7 小时 22 分钟

[项目2]：博客功能25 个讲座 • 3 小时 53 分钟

[项目 2]：用户体验改进13 个讲座 • 2 小时 20 分钟

【项目2】：搜索引擎优化11 个讲座 • 1 小时 43 分钟

【项目2】：部署10 个讲座 • 1 小时 59 分钟

[项目 3]：电影应用程序，基础52 个讲座 • 9 小时 22 分钟

[项目 4]：Starter（旧版）18 个讲座 • 2 小时 38 分钟

[项目 4]：使用 Auth0 进行身份验证26 个讲座 • 4 小时 39 分钟

[项目 4]：投资组合特征39 个讲座 • 6 小时 35 分钟

[项目 4]：博客功能 – Slate 编辑器11 个讲座 • 2 小时 10 分钟

[项目 4]：高级博客功能36 个讲座 • 5 小时 1 分钟

[项目 4]：页面 UX 改进12 个讲座 • 1 小时 32 分钟

[项目 4]：SEO 改进6 个讲座 • 39 分钟

[项目 4]：准备部署13 个讲座 • 1 小时 56 分钟

[可选]：为忙碌的开发人员设置1 个讲座 • 31 分钟

要求

• HTML 和 CSS 基础知识
• 需要基本的 Javascript 知识

说明

这门课程适合你吗？

如果你打算以开发人员的身份开始你的职业生涯或提高你的编程技能，那么本课程适合你。了解如何建立一个出色的投资组合网站，你可以与你的同事或未来的雇主分享。

在一门课程中获得开始 Web 开发所需的一切！从 Web 开发技术开始到更高级的主题，直到你的应用程序部署到 Heroku 或 Vercel 并在 Internet 上在线访问。

这个资源是你开始使用 Next.js、React 和 Node 进行 Web 开发所需的唯一资源。在本课程中，你将获得创建自己的项目所需的信心和技能。你将获得正确的心态来申请开发人员职业并改进 Next.js、React.js 和 Node 等现代框架。

Next.js 是什么？

Next.js 是 React 框架，为服务器端渲染 (SSR) 应用程序提供基础设施和简单的开发体验。

• 直观的基于页面的路由系统（支持动态路由）
• 预渲染，静态生成 (SSG) 和服务器端渲染 (SSR) 均支持每页。

课程结构如下：

• 【项目一】：资源申请（初学者）
• 【项目2】：作品集申请（初级/中级）
• [项目3]：电影应用程序（遗留代码，初学者）
• [项目 4]：投资组合应用程序（遗留代码，初学者/中级）

我们要做什么？

资源项目

该项目涵盖了基本概念。你将了解 React 和 Next JS 的工作原理。

你将了解状态和道具。

这个项目的重点是理解为第二个应用程序准备的基本概念。

投资组合项目

首先，我们将集成应用程序的基本布局。我们会将布局分解成小块，我们将创建许多可重用的组件，例如导航栏、投资组合卡等。我将解释服务器端渲染是如何工作的，如何使用不同的数据获取技术，以及在服务器端与客户端获取数据的区别和好处。

我们将开发的第一个重要功能将是身份验证。Auth0 提供者将处理身份验证。尽管如此，仍有许多工作需要处理。

用户将仅对经过身份验证的用户进行注册和登录和体验功能。你将学习如何通过应用程序限制对页面的访问和管理身份验证状态，从而导致应用程序布局的 UI 更改。

接下来，我们将研究投资组合功能。我们将实现创建投资组合的功能，我将解释如何轻松管理表单。然后我们将查看更新功能，我将向你展示如何使用现有数据填充输入。在本节的最后，我们将介绍删除功能。所有功能都将是反应式的并实时更新视图，你将学习如何使用新的 Next.js 函数创建快速静态页面。

博客功能将是最大的功能。用户将使用提供不同格式选项的石板编辑器创建博客。每个博客最初都会保存为草稿博客，用户有责任发布它。为此，我们将创建一个仪表板页面，显示所有用户博客以发布或从博客中制作草稿。所有已发布的博客都将在博客页面上突出显示，并创建为静态页面，以确保更好的性能。我们还将创建删除和更新功能。

接下来，我们将致力于 SEO（搜索引擎优化）的改进。我将解释 SEO 的基础知识以及如何使其与 Next.js 一起使用。

最后一节将介绍部署。Express API 服务器将部署到 Heroku。Next.js 组合应用程序将部署到无服务器 Vercel 平台，使我们的应用程序在互联网上超快速。

此课程面向哪些人：

• 初学者以及对现代框架感兴趣的经验丰富的开发人员，例如 Next、React 和 Node。
• 本课程适合所有渴望了解 javascript 框架如何工作的人。
• 参加本课程将使你能够在困难的概念之前以简单的方式向你的同事解释。