Skip to Content
View all events

Learn Next.js

Published by O'Reilly Media, Inc.

Beginner content levelBeginner

Using App Routers and React Server Components

Next.js is one of the most popular React frameworks. It comes with inbuilt routing and different rendering capabilities. And it provides a very developer-friendly experience for creating production-ready applications. The majority of React projects choose Next.js as a framework of choice, hence it is a great addition to your tech stack if you are a React developer. This course is also helpful if you are an existing NextJS developer working with page routing, and want to upgrade your knowledge to the latest NextJS routing paradigm and the React Server Components.

The goal of this course is to get you started with Next.js by exploring the main concepts you need to know to build optimized applications. We will start with an introduction to Next.js, and why to use it. Then we will create a new project, and work through examples to understand the concepts like pages and routing, navigation, data fetching, and client and server components. We will see a focus on the App routing and the new concepts introduced in the NextJS 13+ versions. We will explore different folder and file naming conventions and how to approach problem-solving using all these concepts. We will also learn the React Server components and the various data fetching techniques for client and server components. We will explore some best practices and then we will deploy the application on Vercel. By the end of the course, you will understand the core concepts of Next.js, and will be able to apply the learnings in the Next.js application you work with.

What you’ll learn and how you can apply it

  • How to create a new Next.js application and work on existing ones
  • How routing works for App routers
  • App routing vs Page Routing
  • Folder structure for App routing
  • How to use different file conventions like layout, loading, etc.
  • How to add assets and metadata
  • Dynamic routing and navigation
  • How to create API routes
  • Different types of rendering techniques
  • What are Server and Client components
  • Server Side Rending Vs React Server Components
  • Techniques and best practices for fetching data
  • How to deploy your NextJS app

This live event is for you because...

  • You’re a web developer
  • You work with JavaScript libraries or frameworks like ReactJS and NextJS
  • You want to add Next.js skills to your resume
  • You want to work on Next.js projects
  • You want to upgrade your NextJS knowledge to 13+ version

Prerequisites

  • Install Node v20.11.1 and npm on computer
  • Have access to a code editor like VSCode
  • Have access to or create a new free GitHub account (to upload code and then connect to Vercel for deployment)
  • Sign up for a free account at Vercel (optional if you would like to follow along with the hands-on portion of the course)
  • Working knowledge of HTML, CSS, and JavaScript
  • Basic knowledge of React JS
  • Web development experience

Recommended follow-up:

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

Next.js introduction (60 min)

  • Workshop Intro and prerequisites
  • Next.js Introduction
  • Demo - Getting started with Next 13, setting up the environment
  • Discussion/Demo: What is new in Next 13+ version
  • Exercise: Creating and running an app
  • Discussion: Folder structure of the app
  • Break
  • Q&A

Routing and Layouts (70 min)

  • Routing with App folder
  • How Next.js handles routing
  • Difference between Page routing and App routing
  • Exercise: Creating new routes
  • Discussion/Demo: Dynamic routing
  • Exercise: Practicing different types of routes
  • Discussion/Demo: Group routing
  • Discussion/Demo: Shared layouts and templates
  • Exercise: Practicing shared theme and layouts
  • Discussion/Demo: API routes
  • Presentation: How to navigate across pages
  • Demo: Link component and Navigation across pages
  • Exercise
  • Break
  • Q&A

Rendering Techniques (60 min)

  • Different Rendering techniques
  • Discussion/Demo
  • Server rendering
  • Static rendering
  • Dynamic rendering
  • Discussion/Demo
  • Server Components
  • Client components
  • Discussion/Demo: Dynamic Functions
  • Discussion/Demo: Streaming
  • Exercise
  • Break
  • Q&A

Fetching Data (30 min)

  • Data fetching patterns
  • Discussion/Demo: Fetching data for Server components
  • Discussion/Demo: Fetching data for Client components
  • Discussion/Demo: Server Actions
  • Exercise
  • Discussion/Demo: Best Practices
  • Break
  • Q&A

Wrap up (20 minutes)

  • Discussion/Demo: Deploy the app to Vercel
  • Exercise: Deploy all exercises to Vercel
  • Discussion: new releases by NextJS
  • Q&A

Your Instructor

Anuradha Kumari

Anuradha Kumari is a web developer with nine years of experience working with the JavaScript ecosystem. She’s passionate about exploring new technologies and sharing knowledge through tech articles, talks, and workshops. She has been recognized as a Google Developer Expert, Microsoft MVP, Cloudinary Media Developer Expert, and Women Techmaker Ambassador. As an accessibility advocate, she aims to spread awareness and empower the community toward achieving the common goal of inclusion through technology.

linkedinXlinksearch

Skill covered

Next.js