Practical Next.js & React – Build a real WebApp with Next.js

Practical Next.js & React - Build a real WebApp with Next.js

Practical Next.js & React – Build a real WebApp with Next.js

Build Fullstack WebApp with Next.js, React, and Strapi backend. Storybook components library. Practical Next.js & React

Language: english

Note: 4.6/5 (61 notes) 13,545 students

Instructor(s): Nick Ovchinnikov

Last update: 2022-08-31

What you’ll learn

  • Learn core NextJS pre-rendering, SSR, data fetching, routing
  • Create real projects with unique components library, styled-components and Storybook
  • Learn how to build fullstack ReactJS apps with NextJS
  • The latest ecosystem of a NextJS from the ground
  • Create a backend with Strapi and learn fullstack development with NextJS



  • Javascript skills will be necessary
  • ReactJS is strongly recommended
  • Basic Typescript knowledge



Learn a straightforward way to build a real Fullstack web application with React & Next.js + Typescript!

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, etc. No config is required.

Next.js is the production-ready, framework for React JS!

Data fetching in Next.js allows you to render content in different ways. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration. It can make your applications very fast!

During the course, we’ll cover the most important topics.

There’re presented TDD or TLD approaches that I’ll try to practice with you during the coding sessions. Probably you don’t have enough experience with the tests, but it’s ok, there’s still an excellent way to learn it from the course. When you work with code and cover it with test cases, it provides you with guarantees that your code works as you expected. This is the purpose and benefit of the tests.
Tools for testing: Jest, React Testing Library

Storybook is the most popular way to build the components library. From our side, it’s the most basic part of the course. We’ll install and configure Storybook, which will provide us with a full components spec. This approach is called Components Driven Development.
CSS-IN-JS, EmotionJS, and Styled-Components are very powerful toolkits to build UI components. Even very complex component styles can be easily produced and supported by it.

We create Dark and Light modes for your application with EmotionJS and styled-components API and NextJS!

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want. We create our deployment workflow!

Last but not least it’s Redux. Redux is a beautiful way to manage an application state. We’ll use the Redux-Toolkit library – it simplifies the work with Redux.
Check out the full curriculum and free preview videos. Join the course risk-free with a 30-day money-back guarantee!
See you on the course!


Who this course is for

  • React developers who want to build production React apps
  • Developers who want to build fullstack React apps
  • Web developers in general, who want to learn one of the most popular tech stacks


Course content

  • Intro
    • Create-next-app with Typescript
    • Github repo review
    • NextJS and Storybook
    • Images Optimization and Storybook
    • Prettier
    • CSS-IN-JS. EmotionJS
    • The first component
    • Review
  • The power of Storybook
    • JSX at Glance
    • JSX compilation
    • Jest and React Testing Library
    • Dark / Light themes in Storybook
    • Aliases, Fonts and Global styles
    • Aliases and themes for Jest
    • Storybook addon interactions
    • Storybook addon a11y
    • Visual testing and Chromatic
    • Review
  • Storybook and Components Library
    • Tile component
    • Icon component
    • Refactoring
    • Checkbox component
    • Custom hook useId
    • Switch component
    • Logo component
    • Icon Button
    • Input component part 1
    • Input component part 2
    • Input component refactoring
  • Basic layout and pages
    • Create basic layout part 1
    • Create basic layout part 2
    • Theme toggler
    • Next Image and Course component
    • Course component refactoring
    • Home page part 1
    • Home page part 2
    • Custom 404 error page
    • Versel deploy
    • Github Actions and Chromatic
    • CI Test + Lint
    • Review
  • Login and Registration
    • Intro and refactoring
    • Strapi init
    • User, roles and auth flow
    • Login page part 1
    • Login page part 2
    • React hook form and login
    • React hook form, validation and tests
    • Fix styles, add login button
    • Theme toggle flicker fix
    • Registration page
    • User Page and review
  • Auth flow and Redux
    • Update deps
    • State management and Redux-Toolkit
    • User slice
    • Async actions
    • Async actions tests
    • Integration tests and msw
    • Login / Registration flow
    • React-redux and login flow
    • React-redux in Jest and Storybook
    • Full login flow and registration
    • Add page test cases
  • Content with Next and Strapi
    • Upgrade Strapi
    • Add courses endpoint with data
    • SSG, getStaticProps and index page
    • Fix tests and storybook
    • Review deploy with docker and AWS
    • Fix deploy problem
    • Course page, SSG and getStaticPath
    • Search input behavior
    • Search courses
    • SSR + getServerSideProps
    • Fix problems and review


Practical Next.js & React - Build a real WebApp with Next.js

Google Project Management [Coursera with Google]

Time remaining or 210 enrolls left


Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate