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

Complete Next.js with React & Node – Beautiful Portfolio App

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

你会学到什么

  • 使用最新的 Next JS 和 React 开发无服务器和经典 Web 应用程序
  • 通过创建真实世界的应用程序清楚地理解 Web 概念
  • 创建 SEO(搜索引擎优化)和同构友好应用程序
  • 在激动人心的 Next 和 React Web 开发环境中立足

要求

  • 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)。

课程结构如下:

  • 【项目一】:资源申请(初学者)
  • 【项目二】:作品集申请(初级/中级)
  • 【项目三】:电影应用(遗留代码,初学者)
  • 【项目四】:组合应用(遗留代码,初级/中级)

我们要做什么?

资源项目

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

您将了解状态和道具。

该项目的重点是了解将为您准备第二次应用程序的基本概念。

投资组合项目

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

我们将要开发的第一个重要功能是身份验证。Auth0 提供商将处理身份验证。尽管如此,还是会有很多工作要做。

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

接下来,我们将研究投资组合特征。我们将实现创建投资组合的功能,我将解释如何轻松管理表单。然后我们将研究更新功能,我将在其中向您展示如何使用现有数据填充输入。在本节的末尾,我们将研究删除功能。所有功能都将实时响应和更新视图,您将学习如何使用新的 Next.js 功能创建快速静态页面。

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

接下来,我们将致力于 SEO(搜索引擎优化)改进。我将解释 SEO 的基础知识以及如何让它与 Next.js 一起工作。

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

本课程适合谁:

  • 对 Next、React 和 Node 等现代框架感兴趣的初学者和经验丰富的开发人员。
  • 本课程适合所有渴望了解 JavaScript 框架如何工作的人。
  • 参加本课程将使您能够以简单的方式向您的同事解释困难的概念。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。