
Install Node and npm to set up a React app via CDN and render a simple home page; migrate to Next.js with npm for the exchange app.
Learn to style Next.js apps with global CSS imported in the app component for universal resets, and use CSS modules for component-level styles with unique class names, plus optional Sass.
Explore static generation in Next.js, with and without data, and learn how getStaticProps runs at build time to fetch data and pass props to a page.
Explore how server side rendering uses getServerSideProps to generate page HTML on every request, contrasting it with static props and explaining when to use SSR for frequently updated data.
Understand how the app component serves as the entry point for pages, handles page props via get initial props, and enables a custom app to persist layout and inject data.
Learn how SWR's stale-while-revalidate strategy fetches fresh data while caching results, and build reusable data hooks with useSWR and a custom get data hook using LWR for fast server-side rendering.
NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!
Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!
In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It's a breeze with NextJS!
Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.
This course will take you from NextJS beginner to advanced level in no time!
In detail, this course will cover:
What is NextJS? And why would you use it?
Working with file-based routing
Adding dynamic routes and catch-all routes
Implementing different forms of page pre-rendering and server-side rendering
Working with data and adding data fetching + pre-fetching to your apps
Pre-generating dynamic and static pages
Optimizing images with the NextJS Image component
API routes
And much more!
For this course, you'll need basic React knowledge, though the course does come with a "React refresher" module in case it's been some time since you last worked with React.
After finishing this course, you'll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!