easylearn.ing
Easy Learning with Practical Next.js & React - Build a real WebApp with Next.js
IT & Software > Other IT & Software
11 h
£54.99 Free for 2 days
4.4 ★★★★★
61314 students

Enroll Now

Language: English

Sale Ends: 19 Jan

Master Next.js & React: Build a Production-Ready Web App

What you will learn:

  • Build high-performance React applications with Next.js's advanced rendering capabilities (SSR, SSG, ISR)
  • Develop reusable UI components and a component library with Storybook
  • Master modern testing methodologies (TDD/TLD) with Jest and React Testing Library
  • Implement efficient state management with Redux Toolkit
  • Create a full-stack application by integrating a Strapi backend
  • Utilize CSS-in-JS (EmotionJS, Styled-Components) for dynamic styling
  • Automate workflows and deployments with GitHub Actions
  • Implement robust authentication and authorization
  • Optimize images and enhance application performance
  • Build responsive and accessible web applications

Description

Dive into the world of modern full-stack development with our comprehensive Next.js and React course! Learn to build a robust, production-ready web application from the ground up, leveraging the power of Next.js's hybrid static & server rendering, seamless TypeScript integration, and efficient bundling. You'll master data fetching techniques, including Server-Side Rendering (SSR) and Static Site Generation (SSG), for blazing-fast performance.

This practical course goes beyond the basics. You'll implement Test-Driven Development (TDD) or Test-Led Development (TLD) methodologies using Jest and React Testing Library, ensuring code quality and reliability. We'll build a reusable component library using Storybook, embracing a Component-Driven Development (CDD) workflow. Master CSS-in-JS with EmotionJS and Styled-Components to craft elegant and maintainable UI.

Explore advanced features like creating dynamic dark and light modes, streamlining deployment with GitHub Actions, and effectively managing application state with Redux Toolkit. Interact with a Strapi backend for seamless data integration, and deploy your application with confidence. This course is your key to unlocking the full potential of Next.js and building professional-grade web applications.

Benefit from our clear, concise teaching style and practical coding sessions. Unlock your potential and build impressive projects. Our 30-day money-back guarantee ensures you take this risk-free journey! Enroll now and embark on your full-stack development journey!

Curriculum

Introduction to Next.js and Development Setup

This introductory section covers setting up your development environment with Create Next App and TypeScript. You'll explore the course's GitHub repository, learn the basics of Next.js and Storybook integration, optimize images, and understand the use of Prettier for consistent code formatting. The fundamentals of CSS-in-JS using EmotionJS are covered, followed by the creation and review of your first component.

Harnessing the Power of Storybook

This section delves into the power of Storybook for component development. You'll explore JSX compilation, learn Jest and React Testing Library for robust testing, implement dark/light themes within Storybook, and manage aliases, fonts, and global styles. Advanced Storybook addons, including interactions and accessibility (a11y) testing, are covered alongside visual testing with Chromatic.

Building Your Component Library with Storybook

This section is dedicated to building a reusable component library using Storybook. You'll build essential components like tiles, icons, checkboxes, switches, and input fields, utilizing custom hooks for enhanced functionality. Each component will be thoroughly reviewed and refactored for optimal performance and maintainability.

Creating the Basic Layout and Pages

This section focuses on constructing the basic layout of your application, including theme toggling. You'll work with Next Image components and refine the Course component. This involves building the home page, implementing a custom 404 error page, and setting up deployment with Vercel. GitHub Actions and Chromatic integration will automate testing and deployment workflows. Continuous Integration (CI) testing and linting are included to maintain code quality.

Implementing Secure Authentication (Login and Registration)

This section covers building the login and registration functionality. It begins with setting up a Strapi backend, defining user roles and the authentication flow. You'll leverage React Hook Form for efficient form handling, implement robust validation and testing, address styling, and integrate theme toggling. The registration page is created and the section concludes with a comprehensive review of the User Page.

State Management with Redux Toolkit

This section introduces Redux Toolkit for state management. You'll create user slices, implement asynchronous actions and testing, and integrate Mock Service Worker (MSW) for effective integration tests. You'll learn to use React-Redux for integrating Redux into your application and test the implementation in Jest and Storybook. Finally, you'll complete the full login and registration flow and add comprehensive test cases for your pages.

Dynamic Content with Next.js and Strapi

This final section covers integrating dynamic content from your Strapi backend. You'll learn to use Static Site Generation (SSG) with `getStaticProps` and `getStaticPaths`, handle search functionality, and implement Server-Side Rendering (SSR) with `getServerSideProps`. Deployment using Docker and AWS is covered, with troubleshooting and final review to ensure a robust and fully functional application.

Deal Source: real.discount