React + Next JS with TypeScript

React + Next JS with TypeScript, available at $64.99, has an average rating of 4.1, with 101 lectures, 2 quizzes, based on 26 reviews, and has 2317 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner or seasoned web developers who want to build highly optimized, SEO friendly production ready apps or Web developers in general, who want to work with one of the most popular and in-demand tech stacks or Developers / Students looking to brush up on or learn essential modern JS, react JS and Next JS concepts It is particularly useful for Beginner or seasoned web developers who want to build highly optimized, SEO friendly production ready apps or Web developers in general, who want to work with one of the most popular and in-demand tech stacks or Developers / Students looking to brush up on or learn essential modern JS, react JS and Next JS concepts.

Enroll now: React + Next JS with TypeScript

Summary

Title: React + Next JS with TypeScript

Price: $64.99

Average Rating: 4.1

Number of Lectures: 101

Number of Quizzes: 2

Number of Published Lectures: 101

Number of Published Quizzes: 2

Number of Curriculum Items: 104

Number of Published Curriculum Objects: 104

Original Price: $159.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

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 developerand 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-renderingand 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! 馃檪

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Getting Started

Lecture 2: Why Next.js

Lecture 3: Why TypeScript

Lecture 4: Important TypeScript Features

Lecture 5: (Optional) Old devs perspective and controversies on TypeScript

Lecture 6: Prerequisites

Lecture 7: Scaffolding Next.js app with TypeScript enabled

Lecture 8: (optional) Demo – file system based routing

Lecture 9: (optional) Demo – API routes

Lecture 10: (optional) Demo – Prerendering

Lecture 11: Add TypeScript to existing Next.js project

Lecture 12: How to get best out of this course

Chapter 2: Modern JavaScript crash-course

Lecture 1: Section Introduction

Lecture 2: Block Scope – understand the difference between var and let keywords

Lecture 3: Function Scope

Lecture 4: Constant variable references vs immutability

Lecture 5: Arrow Functions

Lecture 6: Variable and function shorthand in object literal

Lecture 7: Destructuring, spreading and rest-spreading

Lecture 8: String templates

Lecture 9: Classes

Lecture 10: Promises and async-await

Chapter 3: TypeScript crash-course

Lecture 1: (optional) TypeScript overview

Lecture 2: Configuring TypeScript

Lecture 3: Basic Types

Lecture 4: Automatic Type Inference, Union Types and Intellisense enhancement

Lecture 5: Arrays and Tuples

Lecture 6: Enum

Lecture 7: Custom types and interfaces

Lecture 8: Read-only attributes

Lecture 9: Function Types and void

Lecture 10: Access modifiers

Lecture 11: Generics

Chapter 4: Fundamental concepts of React.js

Lecture 1: React.js overview

Lecture 2: (optional) Why components?

Lecture 3: JSX – syntactic sugar for writing React code

Lecture 4: JSX Characteristics

Chapter 5: Create To Do App (Class components + JSX fundamentals)

Lecture 1: Introduction

Lecture 2: Source code and resources

Lecture 3: Our first class component

Lecture 4: Embedding comments and expressions in JSX

Lecture 5: List rendering

Lecture 6: Conditional rendering and visibility

Lecture 7: Decomposing into smaller components and using props

Lecture 8: Declaring prop types for class components

Lecture 9: Fragments

Lecture 10: Event Handling; Props are immutable

Lecture 11: Reactive Updates using state; using constructor

Lecture 12: Passing callbacks to child components + binding methods in classes

Lecture 13: Adding Styles: inline, global CSS and CSS modules

Lecture 14: Handling user input

Lecture 15: Using ref (React.createRef)

Lecture 16: Controlled Input

Lecture 17: Life cycle methods

Lecture 18: Section Sumarry

Chapter 6: GitHub Cards App (Function components and React Hooks)

Lecture 1: Conceptualizing the app that we are going to create

Lecture 2: Introduction to functional components and React hooks

Lecture 3: Scaffolding Next.js project with pnpx and adding SCSS support

Lecture 4: Creating Functional Components

Lecture 5: Props in functional component

Lecture 6: Nested styles and & in SCSS

Lecture 7: State in functional components

Lecture 8: Adding side effects

Lecture 9: Accessing DOM elements with useRef and fetching data with fetch

Lecture 10: useContext to broadcast props to all children

Chapter 7: Enhancing GitHub Cards App (Next.js file based routing & meta data)

Lecture 1: Adding meta data to enhance SEO

Lecture 2: Understanding Nested Routes

Lecture 3: Dynamic routes, slugs and useRouter hook

Lecture 4: Client side navigation using Link component

Lecture 5: Nested dynamic routes

Lecture 6: Code splitting and prefetching

Lecture 7: Adding static assets

Chapter 8: Turborepo: Brief introduction

Lecture 1: Turborepo: high-performance build system for JavaScript and TypeScript codebase

Lecture 2: Creating New Turborepo

Lecture 3: Move GitHub card app to monorepo

Lecture 4: Utilising common package in monorepo setup

Chapter 9: Create blog (Pre-rendering and Data Fetching)

Lecture 1: Section Introduction

Lecture 2: Set up the Blog App in Turborepo

Lecture 3: Pre-rendering concepts

Lecture 4: Listing blogs based on file names using fs module

Lecture 5: Statically generating dynamic routes (getStaticPaths)

Lecture 6: Rendering blogs using ReactMarkdown

Lecture 7: Enhancing ReactMarkdown with components

Lecture 8: Styled Components – a handy CSS-in-JS library

Chapter 10: Add likes feature (API routes, Prisma, Postgre database)

Lecture 1: Section Introduction

Lecture 2: Add like button

Lecture 3: Set up Prisma and Postgre database

Instructors

Mayank Chaudhari
M. Tech, IIT | Research Scholar, NUS | Top 1% Talent Upwork

Rating Distribution

1 stars: 3 votes

2 stars: 1 votes

3 stars: 2 votes

4 stars: 2 votes

5 stars: 18 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!