Mô tả

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!

Bạn sẽ học được gì

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

Yêu cầu

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

Nội dung khoá học

7 sections

Intro

8 lectures
Create-next-app with Typescript
04:09
Github repo review
01:22
NextJS and Storybook
10:15
Images Optimization and Storybook
10:52
Prettier
02:04
CSS-IN-JS. EmotionJS
10:59
The first component
09:09
Review
01:31

The power of Storybook

10 lectures
JSX at Glance
11:39
JSX compilation
07:02
Jest and React Testing Library
12:00
Dark / Light themes in Storybook
12:52
Aliases, Fonts and Global styles
08:30
Aliases and themes for Jest
05:55
Storybook addon interactions
08:38
Storybook addon a11y
04:04
Visual testing and Chromatic
07:40
Review
02:59

Storybook and Components Library

11 lectures
Tile component
11:17
Icon component
10:30
Refactoring
05:06
Checkbox component
12:25
Custom hook useId
07:55
Switch component
06:44
Logo component
07:00
Icon Button
08:50
Input component part 1
11:34
Input component part 2
11:19
Input component refactoring
08:34

Basic layout and pages

12 lectures
Create basic layout part 1
11:51
Create basic layout part 2
07:24
Theme toggler
10:53
Next Image and Course component
12:19
Course component refactoring
06:15
Home page part 1
13:10
Home page part 2
04:27
Custom 404 error page
11:07
Versel deploy
04:48
Github Actions and Chromatic
08:39
CI Test + Lint
07:43
Review
01:54

Login and Registration

11 lectures
Intro and refactoring
07:29
Strapi init
08:39
User, roles and auth flow
06:08
Login page part 1
10:29
Login page part 2
09:43
React hook form and login
11:42
React hook form, validation and tests
12:05
Fix styles, add login button
07:52
Theme toggle flicker fix
12:05
Registration page
13:08
User Page and review
02:46

Auth flow and Redux

11 lectures
Update deps
12:17
State management and Redux-Toolkit
08:27
User slice
09:18
Async actions
10:56
Async actions tests
10:02
Integration tests and msw
12:42
Login / Registration flow
11:07
React-redux and login flow
11:37
React-redux in Jest and Storybook
12:01
Full login flow and registration
10:06
Add page test cases
12:08

Content with Next and Strapi

11 lectures
Upgrade Strapi
00:45
Add courses endpoint with data
11:47
SSG, getStaticProps and index page
12:56
Fix tests and storybook
08:52
Review deploy with docker and AWS
12:12
Fix deploy problem
02:51
Course page, SSG and getStaticPath
10:51
Search input behavior
09:47
Search courses
11:05
SSR + getServerSideProps
04:45
Fix problems and review
07:42

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.