Next JS with React Hooks - Building SSR React Applications

Name: Next JS with React Hooks - Building SSR React Applications
Rating: 4.5 (924 reviews)

Get up and running with React Hooks and Next Js in a Day. Learn to build Server Side Rendered (SSR) React applications.

Created byRyan Dhungel

Last updated 10/2023

English

English [Auto],

What you'll learn

Learn React Hooks
Learn Next Js
Learn to Build SSR React Apps

Course content

5 sections • 26 lectures • 1h 48m total length

React hooks1:30
Discover how React hooks unlock state and side effects in functional components with useState and useEffect, replacing class components and their lifecycle methods for simpler development.
Why we used class components?0:50
Recap why we used class components for state, lifecycle methods, and props, then show how hooks replace them by building a counter app first in a class, with use state.
Counter app using class5:44
Build a simple class component counter, managing state and incrementing with a button, then rewrite it with hooks using useState in a React project created with Create React App.
useState hook3:48
Learn to manage state in a functional component with useState, using count and setCount to increment and replace class components. Then use useEffect for handling side effects and lifecycle methods.
useEffect hook6:00
News app using hooks6:38
Build a hacker news client using React hooks to fetch news with useState and useEffect from the Hacker News API and render the results.
Search on input change5:55
Build a search feature with React hooks that updates a search query on input change, fetches news using useEffect when the query changes, and triggers fetch on a button click.
Controlling useEffect's behaviour4:43
Control useEffect to run on submit rather than on every keystroke by wiring an on submit handler, preventing default, and updating the URL from user input.
Loading3:10
Learn to implement a loading indicator in a React Hooks app by managing a loading state with useState. Show the spinner while data loads and hide it when data arrives.
Code organization4:23
Organize a React hooks app by extracting loading, news, and data fetch logic into separate functions to improve readability, then leverage Next.js for server-side rendering to boost seo.

Why learn Next js2:45
Learn Next.js to enable server-side rendering, boosting SEO and delivering content on the initial load. Build fast, React-based apps with familiar code.
Create Next project4:37
Create a next project from scratch by initializing a folder, installing react, react-dom, and next, adding scripts for dev, build, and start, and building pages-based routes.
Next Link to navigate3:38
Learn how to implement client-side navigation in Next.js using the next/link component, wrapping anchor tags for fast page transitions between home and about pages.
Styling4:14
Explore inline styling and style variables in Next.js with React, then apply scoped styles to specific pages like the about page using backticks, including borders and color indigo.
Components3:18
build reusable react components in next.js and export a navigation component using next/link for client-side routing across home and about pages; the next lesson covers custom head for title.
Head meta content3:43
Use Next.js head to customize the page title and meta content, including description and author, and build a reusable layout component with props for title and footer.
Shared Layout4:41
Learn to build a shared layout component that includes navigation across pages, wrap pages with layout, and pass content as props and children to render throughout the app.
Passing props to layout4:03
Pass props to a single shared layout to customize each page with a title and footer. Render children with header and footer across index, about, and home.
Custom document page7:00
Override the default Next.js document with a custom _document.js to share the head section and enable bootstrap styling across pages.
Loading Images3:21
Load images in Next.js by placing assets in the static folder and referencing them directly, then use getInitialProps for server-side data loading on first load and client-side behavior.
Stylesheet - Your own CSS3:01
Write your own css file in the static folder, import it in the document to apply globally, and use a class to set an indigo background.

Starting News app7:20
Fetch news based on search query7:45
Build a server-side rendered news search in Next.js with React hooks by creating a search form, managing the query with useState, and rendering results via getInitialProps.
handleChange event for multiple inputs5:37
Learn to manage multiple input fields using a single handleChange function by updating a multi-field state object, using input names to target text, cool message, and other fields.

Requirements

Basic understanding of React JS

Description

Learn Next JS with React Hooks so that you can start Building SEO friendly, SSR - Server Side Rendered React Applications.

In this course, you will learn React hooks and Next Js building 6 Mini Projects. By the end of this course, you will be fully comfortable to start off your next big project using React Hooks and Next Js so that you application is Server Side Rendered and SEO Friendly.

My focus in this course is to get you up and running with React hooks and Next Js as soon as possible with clear cut understanding, so that you can start building SSR react apps using hooks in a matter of days.

Level up your React skills with this short and easy to follow along course in a matter of days!

Who this course is for:

React Developers looking to learn React Hooks
React Developers looking to learn Next JS
React Developers who wants to build SSR React Apps
React Developers who wants to build SEO friendly React Apps

Next JS with React Hooks - Building SSR React Applications

What you'll learn

Explore related topics

Course content

React Hooks10 lectures • 43min

Next JS11 lectures • 44min

SSR News App with React Hooks and Next JS3 lectures • 21min

Source Code1 lecture • 1min

Bonus1 lecture • 1min

Requirements

Description

Who this course is for: