
Explore how Next.js is a framework that unites tools for production, unlike a library; enjoy routing, image optimization, and automatic code splitting out of the box.
Explore the old dev's perspective on TypeScript, weighing the controversy of adding type safety against the comforts of vanilla JavaScript, and why learning TypeScript can save time and pain.
Learn the prerequisites for the React + Next JS with TypeScript course, including basic coding concepts, Node.js, npm, and choosing an integrated development environment.
Explore system based API routing in a full stack Next.js setup, create an API route that returns a name, and fetch it with useEffect, handling JSON data and state.
Learn how to add TypeScript to an existing Next.js project by scaffolding dependencies, configuring Next.js, and validating the setup with automatic defaults and a simple run.
Explore the evolution of JavaScript since 2015, and learn about functional components and class components, plus how community standards and official resources shape modern web development.
Explore block scope by comparing var and let, showing how let is confined to its block while var remains accessible outside the block.
Learn how constant variable references work and how immutability affects reassigning values; modify object contents but refrain from rebinding the constant to a new object.
Explore how arrow functions differ from traditional function definitions in JavaScript, including how scope and this context are handled, with examples using f1 and f2 and object context.
The lecture explains classes in an object oriented style, covering constructors and properties. It shows private hash properties, extends for inheritance, method overriding, and instantiation with the new keyword.
Configure TypeScript in a React + Next.js project by understanding its JavaScript enhancements. Learn to set up Visual Studio Code, install TypeScript, and configure the TypeScript project for compilation.
Explore generics in TypeScript by building a generic function that takes two values of the same type and returns an array, enforcing type safety for numbers and strings.
Learn how JSX acts as syntactic sugar for writing React code by transforming JSX into React.createElement calls, and compare class and function components in a component-based architecture.
Explore JSX characteristics as a syntax extension for creating elements in React and Next.js, including props and attributes, custom components, curly brace expressions, and the single root element requirement.
Explore React + Next JS with TypeScript by comparing functional components and class components, and practice building components as you learn the core concepts.
Master conditional rendering and visibility in React by using boolean expressions to show or hide tasks, understanding that truthy values render while undefined, null, or false are ignored.
Implement a simple click event to mark a to-do item as completed in React + Next JS with TypeScript, and show how props are immutable while state updates reflect changes.
Learn to create a ref with React.createRef to access an input element and its value. Use the ref to add new tasks to a list and update state.
Master dynamic updates of profile cards by using the useState hook in functional components, initializing with default profiles from utils and editing them via the setter.
Create a global React context with createContext, initialize a provider, and distribute data to all child components. Use useContext to read the shared data across the component tree.
Explore client-side navigation in Next.js by wrapping UI elements with the Link component to enable fast in-app routing for cards and blogs, while touching on dynamic routes.
Learn how to add static assets in a Next.js React TypeScript project by importing image assets, turning them into reusable components, and applying norms for creating a course blog set.
Explore how sections are set up, what rendering means, and how to use get static props and get server side methods as you start building.
Create a like button with a loading icon as a new component in a React + Next JS with TypeScript project, and plan the database setup for next steps.
Set up Prisma with a PostgreSQL database by configuring the environment and credentials, modeling the schema, and applying migrations to generate and manage the database structure.
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! :)