Practical Next.js & React - Build a real WebApp with Next.js
- Description
- Curriculum
- FAQ
- Reviews
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!
-
9JSX at GlanceVideo lesson
-
10JSX compilationVideo lesson
-
11Jest and React Testing LibraryVideo lesson
-
12Dark / Light themes in StorybookVideo lesson
-
13Aliases, Fonts and Global stylesVideo lesson
-
14Aliases and themes for JestVideo lesson
-
15Storybook addon interactionsVideo lesson
-
16Storybook addon a11yVideo lesson
-
17Visual testing and ChromaticVideo lesson
-
18ReviewVideo lesson
-
19Tile componentVideo lesson
-
20Icon componentVideo lesson
-
21RefactoringVideo lesson
-
22Checkbox componentVideo lesson
-
23Custom hook useIdVideo lesson
-
24Switch componentVideo lesson
-
25Logo componentVideo lesson
-
26Icon ButtonVideo lesson
-
27Input component part 1Video lesson
-
28Input component part 2Video lesson
-
29Input component refactoringVideo lesson
-
30Create basic layout part 1Video lesson
-
31Create basic layout part 2Video lesson
-
32Theme togglerVideo lesson
-
33Next Image and Course componentVideo lesson
-
34Course component refactoringVideo lesson
-
35Home page part 1Video lesson
-
36Home page part 2Video lesson
-
37Custom 404 error pageVideo lesson
-
38Versel deployVideo lesson
-
39Github Actions and ChromaticVideo lesson
-
40CI Test + LintVideo lesson
-
41ReviewVideo lesson
-
42Intro and refactoringVideo lesson
-
43Strapi initVideo lesson
-
44User, roles and auth flowVideo lesson
-
45Login page part 1Video lesson
-
46Login page part 2Video lesson
-
47React hook form and loginVideo lesson
-
48React hook form, validation and testsVideo lesson
-
49Fix styles, add login buttonVideo lesson
-
50Theme toggle flicker fixVideo lesson
-
51Registration pageVideo lesson
-
52User Page and reviewVideo lesson
-
53Update depsVideo lesson
-
54State management and Redux-ToolkitVideo lesson
-
55User sliceVideo lesson
-
56Async actionsVideo lesson
-
57Async actions testsVideo lesson
-
58Integration tests and mswVideo lesson
-
59Login / Registration flowVideo lesson
-
60React-redux and login flowVideo lesson
-
61React-redux in Jest and StorybookVideo lesson
-
62Full login flow and registrationVideo lesson
-
63Add page test casesVideo lesson
