React + Next JS with TypeScript

使用 TypeScript 使用 react 和 next js 开发全栈 Web 应用程序的实用指南

发表于 06/2022
MP4 | 视频：h264, 1280×720 | 音频：AAC，44.1 KHz，2 Ch
类型：eLearning | 语言：英语 + srt | 时长：74 节课（5h 59m）| 大小：4.33 GB

你将学到什么
快速复习/速成课程，以加强基本的现代 JS 和 React 概念
学习所有关键的 Next JS 功能，如预渲染、SSR、数据获取、基于文件的路由和身份验证
学习如何构建客户端和完整的使用 Next JS 堆叠 React JS 应用程序
在构建真实项目的同时学习/通过动手项目和示例应用您学到的知识

要求
了解基本的编程概念，例如条件语句和循环
熟悉 JavaScript，如果您不了解现代 JS 特性也没关系
思想开放和愿意学习

描述
如果您是初学者或经验丰富的开发人员，没关系。我设计了这门课程来迎合初学者和经验丰富的开发人员。本课程旨在让您开始真正快速地构建全栈 Web 应用程序，并以正确和安全的方式进行。我是什么意思？我们将使用 JavaScript 的超集 TypeScript 来确保我们编写的代码是类型安全的，并且我们会针对错误获得早期警告，否则这些错误在实际发生在生产中之前很难预测。TypeScript 提供静态类型、增强的 IDE 支持、严格的空值检查（空值错误在历史上最臭名昭著）等功能。别担心！TypeScript 如果在很大程度上可以与 JavaScript 互操作，但有时在将 js 库与 Typescript 一起使用时可能需要一些技巧。

是的，所以如果课程针对更多的受众，因此可以根据您的需要随意跳过某些部分。如果您是初学者或 Web 开发新手，一些高级概念可能不会立即与您非常相关。或者，如果您已经熟悉现代 JS 和 react JS，您可能想跳过这些部分。但是，我试图使这门课程既全面又简洁。我试图以一种易于理解但尽可能简洁的方式包含尽可能多的深度和广度的概念。因此，如果您愿意，我建议您至少以 2 倍的速度浏览整个课程。

Next.js 是适用于 React JS 的生产就绪型、全栈功能框架，它是当今您可以学习的最流行的 JavaScript UI 库之一！

事实上，Next JS 是成长为 React 开发人员并将您的 React 应用程序提升到新水平的绝佳选择！

因为 Next JS 发展迅速，因此需求量很大。这样做有充分的理由：Next JS 允许您使用内置的服务器端渲染、静态渲染、页面预渲染和自动预取与当前页面相关的页面来构建 React 应用程序。构建出色的用户体验和搜索引擎友好 (SEO!) React 应用程序从未如此简单！

此外，Next JS 还使构建全栈 React 应用程序（前端 + 后端代码组合在一个项目中）变得非常容易！混合客户端和服务器端代码，并与您的前端 React 应用程序并行构建基于 Node JS 的 API。Next JS 轻而易举！

本课程包含一些解释性课程、一些挑战、测验和作业，以及大量的编码和截屏视频。首先，我们向您介绍下一个 js，简要介绍一下，以激发您完成本课程后将要完成的工作的动力。然后我们开始学习/刷新 React 社区中最常用的现代 JS 实践。我们将在 Next.JS 应用程序设置中完成所有这些工作！因此，甚至在我们开始深入研究 Next.js 概念之前，您就已经开始使用 Next.js 构建完整的网站。第三，我们将足够深入地介绍 React JS 概念。我们将只关注 React，不会涵盖 React Router、Redux、常用的 webpack 配置等内容，这些内容应该是完整 React 课程的一部分。但是，在使用 Next JS 时，在大多数情况下，您真的不需要任何这些。或者你只在极少数情况下需要使用 Redux 或直接操作 webpack 配置。最后，我们将深入挖掘 Next JS 的特性并在创建多个项目时掌握它们。

本课程将带您立即从对 React 和 Next JS 的熟悉到高级 Next JS 全栈开发人员！

我们将从最基本的开始，根本不需要 Next JS、react 或现代 JS 知识。尽管您应该熟悉基本的编程概念和 JavaScript。我们将在理论和多个实际项目中学习，所有概念都将逐步应用。

完成本课程后，您将为从头开始构建自己的 Next JS 项目并申请 Next JS 职位做好充分准备！

本课程将详细介绍

NextJS 是什么？你为什么要使用它？

为什么仅仅 React（在很多情况下）还不够？

从头开始创建 NextJS 项目并理解这些项目

使用基于文件的路由

添加动态路由和包罗万象的路由

实现不同形式的页面静态渲染和服务器端渲染

处理数据并将数据提取+预提取添加到您的应用程序

预生成动态和静态页面

向页面添加元数据等优化

使用 NextJS Image 组件优化图像

使用 API 路由构建全栈应用程序

使用 React 上下文管理应用程序范围的状态（在 Next JS 应用程序中）

多个完整的应用程序，我们将应用所有这些核心概念！

一个完整的 React.js 速成课程/复习模块

以及更多！

我迫不及待地想和你一起开始这段旅程！?

本课程面向
希望构建高度优化、对 SEO 友好的生产就绪型应用程序的初学者或经验丰富的 Web 开发
人员 一般而言，希望与最受欢迎和需求最大的技术堆栈之一合作的 Web 开发人员 想要复习的
开发人员/学生了解或学习基本的现代 JS、React JS 和 Next JS 概念

A practical guide to developing full stack web apps with react and next js using TypeScript

Published 06/2022
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English + srt | Duration: 74 lectures (5h 59m) | Size: 4.33 GB

What you’ll learn
Quick refresher/crash course to strengthen fundamental modern JS and React concepts
Learn all key Next JS features like pre-rendering, SSR, data fetching, file-based routing and authentication
Learn how to build client-side and full-stack React JS apps with Next JS
Learn while Building real projects / apply what you learned with hands-on projects and examples

Requirements
Knowledge of basic programing concepts like conditional statements and loops
Familiarity with JavaScript, it is ok if you don’t know the modern JS features
An Open Mind and Willingness to Learn

Description
If you are a beginner developer or a seasoned one, it doesn’t matter. I have designed this course to cater to both the beginner and the seasoned developers. This course is designed to get you start building full stack web apps really fast and do it right and safe way. What do I mean? We will use TypeScript, a superset of JavaScript to make sure that the code we write is type-safe and we get early warnings for errors that would otherwise be hard to predict until they actually occurred in production. TypeScript provides features like static typing, enhanced IDE support, strict null checks (null errors have historically been most notorious), etc. And don’t worry! TypeScript if largely interoperable with JavaScript, though it might require some hacks at times when using js libs with Typescript.

Yes, so the course if targeting a larger audience and thus feel free to skip certain sections as per your needs. If you are a beginner developer, or new to web development some advanced concepts might not be very relevant to you immediately. Or if you are already familiar with modern JS and react JS, you might want to skip those sections. However, I have tried to make this course comprehensive as well as concise. I have tried to include as much depth and breadth of the concepts in an easy to understand yet concise fashion as possible. So, I recommend you to at least skim through the entire course with 2x speed if you like.

Next.js is a production-ready, full-stack-capable framework for React JS – one of the most popular JavaScript UI library you can learn these days!

Indeed, Next JS is a great choice for growing as a React developer and for taking your React apps to the next level!

Because Next JS is growing fast and therefore in high demand. And there are good reasons for that: Next JS allows you to build React apps with built-in server-side rendering, static rendering, page pre-rendering and automatic prefetching pages related to the current page. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!

In addition, Next JS makes building full-stack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a Node JS-based API side-by-side with your frontend React apps. It’s a breeze with Next JS!

This course contains a few explanatory lessons, a few challenges, quizzes and assignments and a lot of hands on coding and screencasts. First we introduce you to next js, give a brief introduction to get you motivated about what you are going to accomplish after completing this course. Then we jump into learning/refreshing modern JS practices that are most commonly used in React community. We will do all these right in our Next.JS app setup! So, you will already start building the complete websites with Next.js even before we start digging into the Next.js concepts. Thirdly, we will cover React JS concepts with fair enough depth. We will stick just to React and will not cover things like React Router, Redux, the commonly used webpack configurations etc., which should be a part of a complete React course. However, when using Next JS, you really don’t need any of these for most cases. Or you need to use Redux or manipulate webpack configs directly only in rare cases. Finally, we will dig into the Next JS features and master them while creating multiple projects.

This course will take you from a mere acquaintance to React and Next JS to advanced Next JS full stack developer in no time!

We’ll start at the very basics, no Next JS, react or modern JS knowledge is required at all. Though you should be familiar with the basic programing concepts and JavaScript. We will learn both in theory as well as with multiple real projects where all concepts will be applied step-by-step.

After finishing this course, you’ll be well prepared to build your own Next JS projects from the ground up and apply for Next JS positions!

In detail, this course will cover

What is NextJS? And why would you use it?

Why is just React (in many cases) not enough?

Creating NextJS projects from the ground up & understanding these projects

Working with file-based routing

Adding dynamic routes and catch-all routes

Implementing different forms of page static-rendering and server-side rendering

Working with data and adding data fetching + pre-fetching to your apps

Pre-generating dynamic and static pages

Adding optimizations like metadata to pages

Optimizing images with the NextJS Image component

Building fullstack apps with API routes

Managing app-wide state with React context (in Next JS apps)

Multiple complete apps where we’ll apply all these core concepts!

A complete React.js crash course/refresher module

And much more!

I can’t wait to start this journey together with you! ?

Who this course is for
Beginner or seasoned web developers who want to build highly optimized, SEO friendly production ready apps
Web developers in general, who want to work with one of the most popular and in-demand tech stacks
Developers / Students looking to brush up on or learn essential modern JS, react JS and Next JS concepts