Nextjs Course with Live Demo Applications 2024

Nextjs Course with Live Demo Applications 2024

Build Modern Web Apps with Live Demos (2024)

Introduction

Next.js is a powerful React framework that simplifies the process of building full-stack web applications. In this comprehensive course, you'll learn how to leverage Next.js to create high-performance, SEO-friendly, and feature-rich applications.

Key Topics Covered:

• Understanding Next.js: Explore the core concepts and benefits of Next.js.

• Setting Up a Next.js Project: Create a new Next.js project and configure your development environment.

• Server-Side Rendering (SSR): Learn how to render your React components on the server for improved SEO and performance.

• Static Site Generation (SSG): Pre-render your pages at build time for lightning-fast load times.

• Data Fetching: Fetch data from APIs using getStaticProps and getServerSideProps.

• Routing: Define routes for your application using Next.js's built-in routing system.

• API Routes: Create backend API routes within your Next.js application.

• Deployment: Deploy your Next.js applications to various platforms like Vercel, Netlify, or your own server.

• Advanced Features: Explore advanced features like Incremental Static Regeneration (ISR), internationalization, and custom server.

Live Demos:

Throughout the course, you'll be guided through hands-on live demos, where you'll build real-world applications step-by-step. These demos will reinforce your understanding of the concepts and provide practical experience.

Benefits of Taking This Course:

• Master Next.js: Gain a deep understanding of Next.js and its capabilities.

• Build Modern Web Apps: Learn how to create high-performance, SEO-friendly web applications.

• Improve Your Skills: Enhance your React and JavaScript skills.

• Get Hands-On Experience: Learn through practical examples and live demos.

Join us on this exciting journey to become a Next.js expert and build amazing web applications!

Introduction

• Using the Code Snasphots

• Module Introduction

• What Is React & Why Would You Use It?

• React Projects - Requirements

• Creating React Projects

• Our Starting Project

• Undertanding How React Works

• Building A First Custom Component

• Outputting Dynamic Values

• Reusing Components

• Passing Data to Components with Props

• CSS Styling & CSS Modules

• Exercise & Another Component

• Preparing the App For State Management

• Adding Event Listeners

• Working with State Lifting State Up

• The Special "children" Prop

• State & Conditional Content

• Adding a Shared Header & More State Management

• Adding Form Buttons

• Handling Form Submission

• Updating State Based On Previous State

• Outputting List Data

• Adding a Backend to the React SPA

• Sending a POST HTTP Request

• Handling Side Effects with useEffect()

• Handle Loading State

• Understanding & Adding Routing Adding Routes

• Working with Layout Routes

• Refactoring Route Components & More Nesting

• Linking & Navigating

• Data Fetching via loader()s

• Submitting Data with action()s

• Dynamic Routes Module Summary

• IMPORTANT -- LEGACY CONTENT BELOW

• Module Introduction What is ReactJS?

• Why ReactJS & A First Demo

• Building Single-Page Applications (SPAs)

• React Alternatives

• Creating a New React Project

• Setting Up A Code Editor

React

• Diving Into The Created Project

• How React Works & Understanding Components

• More Component Work & Styling With CSS Classes

• Building & Re-using Components

• Passing Data With Props & Dynamic Content Handling Events

• Adding More Components-
  Introducing State

• Workng with "Event Props"

• Use The Right React Router Version Adding Routing

• Adding Links & Navigation

• Scoping Component Styles With CSS Modules

• Outputting Lists Of Data & Components

• Adding Even More Components

• Creating "Wrapper" Components

• Working With Forms

• Getting User Input & Handling Form Submission

• Preparing The App For Http Requests & Adding a Backend

• Sending a POST Http Request

• Navigating Programmatically

• Getting Started with Fetching Data

• Using the "useEffect" Hook

• Introducing React Context

• Updating State Based On Previous State

• Using Context In Components

• More Context Usage

• Module Summary

• Module Resources

Nextjs SSR

• Module Introduction

• Starting Setup

• Understanding File-based Routing & React Server Components

• Adding Another Route via the File System

• Navigating Between Pages - Wrong & Right Solution

• Working with Pages & Layouts

• Reserved File Names, Custom Components & How To Organize A NextJS Project

• Reserved Filenames

• Configuring Dynamic Routes & Using Route Parameters

• Onwards to the Main Project The Foodies App

• Exercise Your Task-
  Exercise Solution

• Revisiting The Concept Of Layouts

• Adding a Custom Component To A Layout

• Styling NextJS Project Your Options & Using CSS Modules

• Optimizing Images with the NextJS Image Component

• Using More Custom Components

• Populating The Starting Page Content

• Preparing an Image Slideshow

• React Server Components vs Client Components - When To Use What

• Using Client Components Efficiently

• Outputting Meals Data & Images With Unknown Dimensions

• Setting Up A SQLite Database

• Fetching Data By Leveraging NextJS & Fullstack Capabilities

• Adding A Loading Page

• Using Suspense & Streamed Responses For Granular Loading State Management-
  Handling Errors

• Handling "Not Found" States

• Loading & Rendering Meal Details via Dynamic Routes & Route Parameters

• Throwng Not Found Errors For Individual Meals

• Getting Started with the "Share Meal" Form

• Introducing & Using Server Actions for Handling Form Submissions

• Storing Server Actions in Separate Files

• Creating a Slug & Sanitizing User Input for XSS Protection

• Storing Uploaded Images & Storing Data in the Database

• Managing the Form Submission Status with useFormStatus

• Adding Server-Side Input Validation

• Using useFormState()

• Working with Server Action Responses & useFormState

• Building For Production & Understanding NextJS Caching

• Triggering Cache Revalidations

• Don't Store Files Locally On The Filesystem!

• Bonus Storing Uploaded Images In The Cloud (AWS S)

• Adding Static Metadata

• Adding Dynamic Metadata

Nextjs Internals

• Module Introduction

• Project Setup, Overview & An Exercise!

• Exercise Solution - Part

• Exercise Solution - Part

• App Styling & Using Dummy Data

• Handling "Not Found" Errors & Showing "Not Found" Pages

• Setting Up & Using Parallel Routes

• Working with Parallel Routes & Nested Routes

• Configuring Catch-All Routes

• Catch-All Fallback Routes & Dealing With Multiple Path Segments

• Throwing (Route-related) Errors

• Handling Errors With Error Pages

• Server vs Client Components

• Nested Routes Inside Dynamic Routes

• Intercepting Navigation & Using Interception Routes

• Combining Parallel & Intercepting Routes

• Replace page.js with default.js

• Navigating Programmatically

• Defining the Base HTML Document

• Using & Understanding Route Groups

• Building APIs with Route Handlers-

• Using Middleware

• Module Introduction-

• Adding a Backend

• Option Client-side Data Fetching

• Option Server-side Data Fetching

• Why Use A Separate Backend? Fetching Directly From The Source!

• Showing a "Loading" Fallback

• Migrating An Entire Application To A Local Data Source (Database)

• Granular Data Fetching With Suspense