Official Next Js Tutorial Code Along - React Web Development

Video description

Next.js is a popular open-source JavaScript framework designed to make web development with React efficient and scalable. Next.js adds layers of abstraction to React and simplifies the process of building modern web applications. It provides a set of conventions and features that enhance the development experience, making it easier to create performant and SEO-friendly applications.

This comprehensive Next.js course unfolds by beginning with an introduction to web development fundamentals, as it progresses through React basics, advanced Next.js concepts, and real-world deployment strategies. We will explore key topics such as server-side rendering (SSR), client-side rendering (CSR), static site generation (SSG), and incremental static regeneration (ISR). The course offers hands-on experience with a final project, covering everything from structuring applications to optimizing for performance and SEO. The modular format accommodates varying skill levels, ensuring a well-rounded and practical learning experience for all learners.

Upon completion of this Next.js course, you will become proficient in web development fundamentals, React essentials, and advanced Next.js concepts. Through hands-on experience, master server-side rendering, client-side rendering, dynamic routing, and performance and scalability in real-world scenarios.

What you will learn

  • Master SSR, CSR, and SSG for optimized web development
  • Explore React basics and advanced component development in Next.js
  • Implement Next.js best practices for efficient and scalable web applications
  • Learn to create dynamic routes for versatile content handling
  • Deploy fully functional applications using Vercel and Git/GitHub workflows
  • Enhance applications for search engines and social platforms through metadata and SEO practices


This Next.js course is tailored for a diverse audience, catering to both entry-level and seasoned developers. Ideal for junior developers, it provides a strong foundation in web development fundamentals, React basics, and advanced Next.js concepts. Intermediate developers can enhance their skills and gain mastery in the latest features of Next.js. Senior web developers seeking to stay updated with modern concepts will find valuable insights for optimizing web applications. No programming experience is required, but basic web development and JavaScript understanding is desirable for the course.

About the Author

Clarian North: Clarian North is a recognized industry-certified instructor, CEO of Orbital LLC, and a senior project engineer with over 90K enrolments worldwide. His students have gone on to work for some of the biggest production companies such as Universal, Google, Amazon, Warner, and the BBC. He has contributed to viral streams, grown a unique digital imprint in over 80 countries, and been featured in Rolling Stone, Billboard, Guardian, Bloomberg, and Vice.

He has worked for majors, indies, and international publishing houses, including Grammy-nominated and award-winning productions, mixing for Emirates Airline Inflight Radio, and producing for Kompakt Records. He is dedicated to giving accessible and comprehensive tech courses, teaching complex subject matter with clear and example-based explanations, and guiding students through complex techniques with just a computer and free software.

Table of contents

  1. Chapter 1 : Introduction
    1. Course Overview
    2. What Is Next.js and Web Development Basics
    3. What Are the Essentials of Web Development for Beginners
    4. Quick Note on Self-Learning
    5. What Is React for Complete Beginners
    6. What Is Next.js Exactly and Its Usefulness Basics
    7. How Websites and HTML Work for Complete Beginners
  2. Chapter 2 : Build a Basic Website from Scratch
    1. What Is a Text Editor and How to Get VSC
    2. Deploy Your First Website with Old-School HTML and JS for Complete Beginners
    3. Manipulate the DOM with JavaScript Web Basics
    4. Imperative Versus Declarative Programming and Web Development
  3. Chapter 3 : Build a React Project from Scratch
    1. Convert Website Code to a React App Manually with Src Pointing
    2. Introduction to Babel and JSX
  4. Chapter 4 : JavaScript Essentials for Mastering React
    1. Download Node.js and What Is Node.js
    2. Setting Up Our Learning Environment
    3. What Are Functions in JavaScript
    4. Example of How Functions Work in JavaScript for Complete Beginners
    5. What Are Function Expressions in JavaScript
    6. JavaScript Interview Question Trick with Function Expressions and Utility Fun
    7. What Is Function Hoisting in JavaScript
    8. How Scope Works in JavaScript
    9. What Are Closures and an Example with JavaScript Explained
    10. Advanced Closure Module Pattern with Data Privacy Encapsulation
    11. What Are Arrows Functions and Usefulness in React
    12. Destructuring with JavaScript
  5. Chapter 5 : React Code Along from Scratch – Step-by-Step Learning React
    1. How to Write Components in React
    2. How the Component Tree Structure in React Works and Nested Components
    3. How Props Work in React
    4. Mapping Through Lists in React
    5. What Are React Hooks and State in React
  6. Chapter 6 : Introduction to Next.js for Professional Development
    1. Migrating from React to Next.js
  7. Chapter 7 : Higher-Level Next.js Core Concepts
    1. Development Environment and Build Versus Production Build with Next.js
    2. Introduction to the Next.js Compiler
    3. Demystifying What Is Meant by Next.js 'Compiler'
    4. What Is Minification in Next.js
    5. What Is Bundling in Next.js
    6. What Is Code Splitting in Next.js
    7. Build-Time Versus Run-Time Basics
    8. What Is the Client and What Is the Server in Web Applications - Basics
    9. What Is Rendering in Next.js
    10. What Is Pre-Rendering in Next.js
    11. What Is CSR, Client-Side Rendering with Next.js
    12. How Server-Side Rendering Works as a Deeper Dive
    13. What Is SSG in Next.js
    14. What Are CDNs and the Edge in Next.js and Vercel
  8. Chapter 8 : Build a Next.js App from Scratch Bootcamp Code-Along - Zero to Hero
    1. Introduction and Quick Note about the Upcoming Final Project
    2. How to Start a Next.js Template Locally
    3. Next.js Template File Structure Overview
    4. How Pages Work in Next.js
    5. Prefetching and Codesplitting with Link And CSN – Client-Side Navigation in N
  9. Chapter 9 : Working with Metadata and Assets in Next.js
    1. Download the CSS Starter Kit Project from Next.js Official
    2. How Images Optimize with Next.js
    3. Scripts and Header Data and Props with Next.js
    4. CSS Modules and Next.js Optimizations with Layout
    5. Global Styling with Next.js
    6. Customizing Utility Styles with Next.js
    7. Metadata for SEO and Social Media with Next.js
    8. Writing Dynamic Layout Components with Next.js
    9. How to Use Children and Props in React and Next.js
  10. Chapter 10 : Pre-Rendering and Data Fetching with Next.js
    1. Pre-Rendering Tests with Next.js
    2. What Is Static Generation Versus Server-Side Rendering with Next.js
    3. Static Generation with Data in Next.js
    4. Concise Basic Algorithms for Next.js Practice and Data Processing
    5. Static Generation and GetStaticProps with Next.js
    6. When to Use GetStaticPropsServer with Next.js
    7. SSR Versus CSR and GetServerSideProps with Next.js
  11. Chapter 11 : Dynamic Routes with Next.js
    1. How to Create Dynamic Routes with Next.js
    2. getStaticPaths with Next.js Implementation
    3. Mastering Dynamic Static Rendering with Next.js
    4. Rendering Markdown and Security Vulnerabilities with Injected HTML
    5. Polishing the Dynamic Post Pages
    6. Polishing a Next.js Component with Styling
    7. Fetching Data and Database Querying Plus ISR with Next.js
    8. API Routes with Next.js
  12. Chapter 12 : How to Deploy a Next.js Application from Scratch
    1. What Is GitHub and How to Get Started with It
    2. How to Push Your Next.js App to GitHub
    3. Deploy Your App to Vercel and Commit Changes with GitHub
    4. Real-World Multi-Branch Feature Building on GitHub with React
    5. Pull Requests and Merging Code Reviews with GitHub Automatic Vercel Deployment

Product information

  • Title: Official Next Js Tutorial Code Along - React Web Development
  • Author(s): Clarian North
  • Release date: January 2024
  • Publisher(s): Packt Publishing
  • ISBN: 9781835463444