К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Official Next Js Tutorial Code Along - React Web Development · LearnSpace
Назад в каталог
courseraПрограммирование

Official Next Js Tutorial Code Along - React Web Development

Курс от Packt
Средний≈ 17.1 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. Are you ready to master Next.js and React web development? This course is designed to guide you through the process of becoming proficient in building dynamic, high-performance web applications. From the basics of web development to advanced concepts in Next.js, you will be exposed to every step of the journey. Along the way, you'll gain practical experience through hands-on projects and code-along examples. The course starts with an introduction to foundational web development concepts such as HTML, CSS, and JavaScript. Once you’re comfortable with the basics, you’ll dive into React, learning how to write components, manage state, and utilize hooks to enhance your app’s functionality. As you progress, you'll migrate from React to Next.js, understanding server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR). Each lesson builds upon the last, ensuring a smooth learning curve while also reinforcing key concepts. The course is designed to provide you with the necessary tools to confidently build, deploy, and optimize full-stack applications using Next.js. You’ll gain insights into performance optimization techniques like code splitting, prefetching, and dynamic routing, as well as working with metadata and assets. By the end of the course, you'll be equipped to deploy a fully functional Next.js app with real-world features, preparing you for professional development tasks. Who will benefit from the course? This course is perfect for beginners with a basic understanding of web development, as well as React developers who want to elevate their skills with Next.js. There are no advanced prerequisites, but familiarity with HTML, CSS, and JavaScript is recommended. This course is ideal for aspiring front-end developers, full-stack developers, and anyone looking to learn modern web development tools and techniques. By the end of the course, you will be able to build and deploy production-ready Next.js applications, integrate dynamic content with React, optimize your app's performance, and leverage modern web development techniques in a professional setting.

Навыки, которые вы освоите

Front-End Web DevelopmentReact.jsFrontend PerformanceGitHubVersion ControlHypertext Markup Language (HTML)JavascriptCascading Style Sheets (CSS)Application DeploymentJavaScript FrameworksFull-Stack Web DevelopmentHTML and CSSServer SideUI ComponentsWeb DevelopmentPerformance TuningWeb Development ToolsGit (Version Control System)

Программа курса

12 модулей · 104 учебных материалов

01Introduction9 материалов

Introduction

Course OverviewВидеоFull Course ResourcesЧтениеWhat Is Next.js and Web Development BasicsВидеоWhat Are the Essentials of Web Development for BeginnersВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

Official Next Js Tutorial Code Along - React Web Development
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 17.1 ч

12 модулей

Язык: Английский

Субтитры: Арабский, Французский, Итальянский, Корейский, Индонезийский, Испанский, Японский

Часть программы вашего университета
Quick Note on Self-LearningВидео
What Is React for Complete BeginnersВидео
What Is Next.js Exactly and Its Usefulness BasicsВидео
How Websites and HTML Work for Complete BeginnersВидео
Introduction - AssessmentЗадание
02Build a Basic Website from Scratch6 материалов

Build a Basic Website from Scratch

What Is a Text Editor and How to Get VSCВидеоDeploy Your First Website with Old-School HTML and JS for Complete BeginnersВидеоManipulate the DOM with JavaScript Web BasicsВидеоImperative Versus Declarative Programming and Web DevelopmentВидеоEssential Workflow: Text Editors, HTML, and the JavaScript DOMDIALOGUEBuild a Basic Website from Scratch - AssessmentЗадание
03Build a React Project from Scratch4 материалов

Build a React Project from Scratch

Convert Website Code to a React App Manually with Src PointingВидеоIntroduction to Babel and JSXВидеоBuilding a Simple React App with JSX and BabelDIALOGUEBuild a React Project from Scratch - AssessmentЗадание
04JavaScript Essentials for Mastering React14 материалов

JavaScript Essentials for Mastering React

Download Node.js and What Is Node.jsВидеоSetting Up Our Learning EnvironmentВидеоWhat Are Functions in JavaScriptВидеоExample of How Functions Work in JavaScript for Complete BeginnersВидеоWhat Are Function Expressions in JavaScriptВидеоJavaScript Interview Question Trick with Function Expressions and Utility FunВидеоWhat Is Function Hoisting in JavaScriptВидеоHow Scope Works in JavaScriptВидеоWhat Are Closures and an Example with JavaScript ExplainedВидеоAdvanced Closure Module Pattern with Data Privacy EncapsulationВидеоWhat Are Arrows Functions and Usefulness in ReactВидеоDestructuring with JavaScriptВидеоMastering Functions, Scope, and Closures in JavaScriptDIALOGUEJavaScript Essentials for Mastering React - AssessmentЗадание
05React Code Along from Scratch – Step-by-Step Learning React7 материалов

React Code Along from Scratch – Step-by-Step Learning React

How to Write Components in ReactВидеоHow the Component Tree Structure in React Works and Nested ComponentsВидеоHow Props Work in ReactВидеоMapping Through Lists in ReactВидеоWhat Are React Hooks and State in ReactВидеоReact Components, Props, and StateDIALOGUEReact Code Along from Scratch – Step-by-Step Learning React - AssessmentЗадание
06Introduction to Next.js for Professional Development3 материалов

Introduction to Next.js for Professional Development

Migrating from React to Next.jsВидеоUnderstanding Next.js Project Setup and MigrationDIALOGUEIntroduction to Next.js for Professional Development - AssessmentЗадание
07Higher-Level Next.js Core Concepts16 материалов

Higher-Level Next.js Core Concepts

Development Environment and Build Versus Production Build with Next.jsВидеоIntroduction to the Next.js CompilerВидеоDemystifying What Is Meant by Next.js 'Compiler'ВидеоWhat Is Minification in Next.jsВидеоWhat Is Bundling in Next.jsВидеоWhat Is Code Splitting in Next.jsВидеоBuild-Time Versus Run-Time BasicsВидеоWhat Is the Client and What Is the Server in Web Applications - BasicsВидеоWhat Is Rendering in Next.jsВидеоWhat Is Pre-Rendering in Next.jsВидеоWhat Is CSR, Client-Side Rendering with Next.jsВидеоHow Server-Side Rendering Works as a Deeper DiveВидеоWhat Is SSG in Next.jsВидеоWhat Are CDNs and the Edge in Next.js and VercelВидеоUnderstanding Next.js Environments and Rendering TechniquesDIALOGUEHigher-Level Next.js Core Concepts - AssessmentЗадание
08Build a Next.js App from Scratch Bootcamp Code-Along - Zero to Hero7 материалов

Build a Next.js App from Scratch Bootcamp Code-Along - Zero to Hero

Introduction and Quick Note about the Upcoming Final ProjectВидеоHow to Start a Next.js Template LocallyВидеоNext.js Template File Structure OverviewВидеоHow Pages Work in Next.jsВидеоPrefetching and Codesplitting with Link And CSN – Client-Side Navigation in NВидеоUnderstanding Next.js Routing and NavigationDIALOGUEBuild a Next.js App from Scratch Bootcamp Code-Along - Zero to Hero - AssessmentЗадание
09Working with Metadata and Assets in Next.js11 материалов

Working with Metadata and Assets in Next.js

Download the CSS Starter Kit Project from Next.js OfficialВидеоHow Images Optimize with Next.jsВидеоScripts and Header Data and Props with Next.jsВидеоCSS Modules and Next.js Optimizations with LayoutВидеоGlobal Styling with Next.jsВидеоCustomizing Utility Styles with Next.jsВидеоMetadata for SEO and Social Media with Next.jsВидеоWriting Dynamic Layout Components with Next.jsВидеоHow to Use Children and Props in React and Next.jsВидеоCreating and Managing Metadata and Assets in Next.jsDIALOGUEWorking with Metadata and Assets in Next.js - AssessmentЗадание
10Pre-Rendering and Data Fetching with Next.js9 материалов

Pre-Rendering and Data Fetching with Next.js

Pre-Rendering Tests with Next.jsВидеоWhat Is Static Generation Versus Server-Side Rendering with Next.jsВидеоStatic Generation with Data in Next.jsВидеоConcise Basic Algorithms for Next.js Practice and Data ProcessingВидеоStatic Generation and GetStaticProps with Next.jsВидеоWhen to Use GetStaticPropsServer with Next.jsВидеоSSR Versus CSR and GetServerSideProps with Next.jsВидеоUnderstanding Pre-Rendering and Data Fetching in Next.jsDIALOGUEPre-Rendering and Data Fetching with Next.js - AssessmentЗадание
11Dynamic Routes with Next.js10 материалов

Dynamic Routes with Next.js

How to Create Dynamic Routes with Next.jsВидеоgetStaticPaths with Next.js ImplementationВидеоMastering Dynamic Static Rendering with Next.jsВидеоRendering Markdown and Security Vulnerabilities with Injected HTMLВидеоPolishing the Dynamic Post PagesВидеоPolishing a Next.js Component with StylingВидеоFetching Data and Database Querying Plus ISR with Next.jsВидеоAPI Routes with Next.jsВидеоImplementing Dynamic Blog Pages with Next.jsDIALOGUEDynamic Routes with Next.js - AssessmentЗадание
12How to Deploy a Next.js Application from Scratch8 материалов

How to Deploy a Next.js Application from Scratch

What Is GitHub and How to Get Started with ItВидеоHow to Push Your Next.js App to GitHubВидеоDeploy Your App to Vercel and Commit Changes with GitHubВидеоReal-World Multi-Branch Feature Building on GitHub with ReactВидеоPull Requests and Merging Code Reviews with GitHub Automatic Vercel DeploymentВидеоHow to Deploy a Next.js Application from Scratch - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание