Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Let's Build 10 NextJs Projects
Rating: 4.6 out of 5(2 ratings)
18 students

Let's Build 10 NextJs Projects

Build 10 NextJs projects to learn the intricacies of the React Framework
Created byThomas Sankara
Last updated 3/2025
English

What you'll learn

  • Learn how to build any application using NextJs
  • Learn React Server and Client components
  • Client and Server-Side Rendering
  • Learn NextJs's File-based routing, nested routes, route groups and dynamic routing
  • Learn Data Fetching in both client and server components
  • Learn about the usePathname and useRouter hook
  • How to style a NextJs application

Course content

12 sections • 75 lectures • 11h 30m total length

  • Introduction And What We Will Build2:12
  • Prerequisites5:37
  • How to create a NextJs application3:48
  • NextJs File Structure and VSCode Extensions We Will Use11:05
  • Reserved File Names10:36
  • NextJs Routing and Layouts9:12
  • Dependencies We Will Need11:10
  • Github Template Repository We Will Be Using6:20
  • NextJs Metadata10:01
  • Github Repository For Your Reference0:38

Requirements

  • Knowledge of how to structure a website using HTML
  • Knowledge of how to style a website using CSS
  • Tailwind CSS is a good addition but NOT REQUIRED
  • How to manipulate the DOM using JavaScript
  • Some knowledge of how React works with the virtual DOM and rendering components

Description

NextJs is an open source web development framework built by Vercel, and built upon the React JavaScript library. It has become one of the most beloved frameworks for front-end and back-end web developers because it offers server-side rendering by default, and static-site generation. Because it is a framework, NextJs handles a lot of nuances that React does not. For example:


  1. It has built in optimizations for images and fonts so that they don't cause a layout shift when your page loads.

  2. It uses React Suspense to enable dynamic HTML streaming from the server so that users can still interact with your website as more content is processed from the server.

  3. It uses React Server components by default which are more secure when querying data from a database and which provide and additional layer of security to your application because it's data is not saved on the client.

  4. NextJs allows us to make server components asynchronous. This allows us to use the async / await keywords when naming components in order to fetch data from a source.

  5. It allows for many CSS integrations including CSS modules, frameworks and CSS-in-JS libraries such as Emotion.

  6. It has support for Incremental Static Generation (ISR), caching, and the newly introduced, but still experimental Partial Prerendering (PPR).

  7. It has support for server actions which are asynchronous functions that can be run in both the server and client to execute in one network roundtrip.

  8. You can build your own API routes such as for authentication and webhooks thanks to its Route handlers.

  9. You can implement your own middleware.

  10. It uses a file-based routing system that allows for generating dynamic routes at build time, and nesting routes.

NextJs is built on React, Turbopack, and Speedy Web Compiler (SWC).

Who this course is for:

  • Beginner developers curious about React
  • Beginner developers curious about NextJS
  • Beginner developers who want to improve their front-end journey with NextJs

Report abuse