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

Explore jsx at a glance by building composable React components, using props and children, typing with interfaces, and composing header and link components with React DOM render.

Explore how JSX compiles into React elements, review Babel transforms, and examine the React 17 shift changing imports and element handling during compilation.

Explore how to set up Jest with React Testing Library, configure setupFilesAfterEnv, and use render, screen, and userEvent to test components, including snapshots and event handling.

learn to implement dark and light themes in Storybook for a Next.js React app using decorators, backgrounds, and a theme provider.

Show how to use TypeScript path aliases, add Google fonts, and apply global styles in Storybook with decorators and reusable style helpers for consistent transitions and shadows.

Map jest aliases with moduleNameMapper, enable public/static assets, and wrap tests in a ThemeProvider using a custom render to test light and dark themes with testing library react.

Explore writing test cases in Storybook using the interactions addon, with component story objects, the play function, and Storybook Jest expectations to verify button clicks across color variants.

Install and enable the storybook a11y addon, run accessibility checks, and review color contrast across dark and light modes. The demo shows passing rules for components and buttons.

Learn how Chromatic enables visual testing and regression checks for Storybook, providing instant feedback, screenshot comparisons, and collaborative review to catch UI changes across builds.

Develop a components library with a bottom component, storybook setup, and test cases. Highlight pull requests, readme guidance, and common styles as the project infrastructure evolves.

Build a reusable tile component as a functional component with header and children props, styled with border radius and box shadow; create stories to test rendering and light/dark theme accessibility.

Learn to build a reusable icon component with a React SVG icons library, supporting name and size props, dynamic theming, styled wrappers, and Storybook documentation.

Explore practical refactoring steps in a Next.js and React project: modular exports, per-component tests, updating to modern React runtime, and building color-based button variants (primary, secondary, danger, warning).

Build a customizable checkbox component in a practical Next.js and React app, styling the visible part, binding input to a generated unique id, and enabling hover, transitions, and testable behavior.

Create a switch component using a universal useId hook to generate unique IDs, bind with an input via id, and test with the react hooks testing library.

Build and style an interactive switch component in React, wiring on change props, applying accessibility-friendly dark and light themes, and documenting, testing, and Storybook integration for robust interfaces.

Build a logo component with a monotone font from Google Fonts, implementing neon glow via text-shadow, responsive to a size prop in dark and light modes, shown in storybook.

Create an interactive icon button component with customizable icon and size props, implement accessible labeling, and validate it with storybook and snapshot tests.

Build a reusable input component with label and placeholder, wiring onChange and focus styles; extend with feedback, valid/invalid states, light/dark themes, and optional icons in Storybook.

Refactors the input component to support an icon prop, updates styling for with-icon and without-icon scenarios, and verifies accessibility and tests in Storybook and npm test.

Refactor an input component in a Next.js and React course to remove fixed left padding, move the icon to the tail, and leverage flexbox for label and feedback.

Create a flexible layout component using grid template areas for header, navigation, search, content, and footer, with responsive grid fractions and Next.js link usage.

Build a responsive Next.js and React layout with header, navigation, content, and footer using grid areas and media queries; center the logo and wrap it in a link, updating snapshots.

Implement a persistent layout and a theme switcher in a Next.js app with a dark and light theme provider. Load fonts via a custom document and reflect user color preference.

Build a real home page course tile as a reusable Next.js and React component, using next/image for fast, accessible images, image props, header, and emotion-based styling.

Refactor the course component by implementing storybook interactions, creating a universal link component, updating tests and snapshots, and aligning layout with unified link styles for Next.js and React.

Build a Next.js home page by exporting the component, using the Next.js head component, rendering a courses array, and implementing responsive two-column layouts with emotion global styles.

Continue building the home component, add spacing around navigation, and create a local style link. Implement a logo link, responsive header, dark/light mode, and fix image optimization issues.

Build a practical Next.js and React web app with a custom 404 error page, a home link, and unique keys for list items.

Connect and configure a git repository for vercel deployment, import the repository, and enable automatic builds and deployments while fixing pages by organizing stories and pushing a pull request.

Set up and deploy with GitHub actions by creating a Chromatic workflow, installing dependencies, and publishing Storybook to Chromatic, while managing secrets and addressing test failures.

Create a continuous integration workflow that runs on push to master or pull request, installs dependencies, runs tests and lint, updates snapshots, and allows manual workflow dispatch before merging.

Explore a fully functional app with deployment, dark and light themes, continuous integration and delivery, tests, and pull requests, while forking to review the next course blocks.

Explore turning a Next.js and React project into a full-stack app by refactoring the file system, moving toward a Strapi-based API, and configuring workflows with chromatic deployment.

Initialize and configure a Strapi backend, install dependencies, and create a user. Build a choruses collection, add fields, publish entries, and test with an API token and REST client.

Learn to implement user registration and login via API, manage tokens, and configure role-based permissions for a secure auth flow in a Next.js and React web app.

Build a login page in a Next.js and React app by composing reusable input and tile components, wiring labels, placeholders, and center tiles for a polished UI.

Refactor the login page into a flexible grid with label, input, and feedback areas, using wrapper and visibility booleans, and add sign in with a create account link.

Learn to build a login form with React Hook Form, implement validation, register inputs, and display real-time feedback, including using forwardRef for custom input components.

Implement client validation with React Hook Form, enforcing required fields and minimum length for identifier and password, and verify errors, feedback, and UI via tests.

Add a login button and login flow, refactor into components, implement dark mode persistence with local storage, and outline a Redux-based global store to manage login state.

Fix flickering in theme toggling by applying dark and light background and font color from local storage and user preference, using a custom hook to avoid server-client mismatch.

Build and validate a registration page using React form in a Next.js app, with a username, email, and password field, client-side validation, conditional feedback, and a connected sign-up flow.

Build a user page showing username and email after login or signup, with profile header and logout button, using mocked data and storybook, and plan client–server integration with relax toolkit.

Update dependencies and storybook, run npm install and npm check updates, and verify with tests and the dev server. Assess major updates, release notes, and React 18 compatibility.

Learn how Redux Toolkit powers data-driven UI by creating a user slice with initial state, reducers, and a configured store, connecting login and theme actions.

Export actions and reducer for a functional user slice, implement initial state and merge state updates via payloads, and validate behavior with mock user data and tests.

Implement async login actions to authenticate with a backend, manage JWT and user data in local storage, and handle get and post requests with redux toolkit extra reducers.

Test async actions in a Next.js and React app by adding pending and reject cases to the extra reducer. Validate state changes with mock login data and reducer tests.

Set up API mocks with mock service worker in a Next.js and React course, build login and user me flows, and verify integration tests using Jest and local storage.

Explore a practical login and registration flow in a React app, featuring a root reducer, unified handlers, local storage management, and tested async actions.

Integrate Redux with React by wiring a provider and store, use useSelector and useDispatch to manage user state, handle login/logout flows, and redirect with router.

Explore testing with react-redux in jest and storybook by wiring a redux provider, configuring store, and using preloaded state to simulate login and user flows.

Build a complete login and registration flow for a blogging app with Next.js and React, including token handling, error cases, and redirects to the profile page.

Learn to add page test cases in a practical Next.js and React app, wrapping stories with Redux provider using decorators, running Storybook, and testing login and registration flows.

Upgrade Strapi by updating the user permission plugin internationalization, check updates, run npm install, and start the develop script to view new versions in the project.

Define a course content type schema with required and unique fields, add cover media. Query the API with populate to retrieve course data and image formats.

Learn how to use static site generation with getStaticProps to pre-build a Next.js index page that renders a public courses collection, fetching data at build time and caching it.

Fix tests and storybook by updating the snapshot, adding mock data, and resolving type and image URL issues. Reconfigure storybook to load assets from public and prepare for deployment.

Deploy a Next.js app with Docker on AWS, build a production image, push to Elastic Container Registry, and run it on ECS with task definitions, services, and security groups.

Fix deploy problem by configuring environment variables for local and AWS, pushing changes to trigger a rebuild and verify stage deployment, adjust image domains, and explore rendering deployment with Next.js.

Use getStaticPaths and getStaticProps to prebuild each course page from backend data, enabling dynamic routes with [id], markdown rendering, and optimized images.

Create a search input that syncs with the router query parameter q, updates on user input, redirects to the search page, and clears when the query is empty.

Learn to implement a course search feature with a back-end API using query strings and filters, manage state with React hooks, refactor components, and enable server-side rendering for results.

Explore server side rendering with Next.js using getServerSideProps to fetch data per request, pass props to the page, handle errors, and compare to static props in a practical SSR example.

Diagnose build and test failures in a Next.js and React app, add storybook and router mocks, adjust layout and providers, update snapshots, and verify production deployment.