Скачать Eng Next.js 14 и React — полное руководство - udemy (2024)

[bart]

Next.js 14 и React — полное руководство
Next.js 14 & React - The Complete Guide
udemy

Чему вы научитесь​

• Узнайте, как создавать полнофункциональные приложения React с помощью NextJS 14 и App Router.
• Создавайте реальные проекты и применяйте полученные знания на практических проектах и примерах.
• Узнайте о различных способах создания приложения NextJS — App Router против Pages Router.
• Начните работу с серверными компонентами React, клиентскими компонентами, извлечением данных и многим другим!
• Обработка отправки данных с помощью действий сервера
• Изучите все ключевые функции NextJS, такие как предварительный рендеринг, SSR, выборка данных, маршрутизация на основе файлов и аутентификация.
• Пройдите полный курс или модуль «Сводка NextJS» для быстрого старта, если у вас ограничено время.

Присоединяйтесь к этому популярному курсу NextJS и узнайте, как создавать высокодинамичные, сверхбыстрые и готовые к SEO приложения React с помощью React и NextJS!
В этом курсе рассматриваются как «Маршрутизатор приложений» NextJS, так и «Маршрутизатор страниц» — два разных подхода к созданию полнофункциональных приложений с помощью React! И, конечно же, вы узнаете, что это за два подхода, почему существуют два разных подхода и как работает каждый из них!

Я создал пользующийся спросом курс Udemy по React , и теперь я очень рад поделиться с вами этим NextJS — углубленным курсом об удивительном фреймворке React, который позволит вам сделать следующий шаг в качестве разработчика React и создать настоящий производственный проект. готовые проекты на React и Next.js!
Next.js — это готовый к использованию полнофункциональный фреймворк для ReactJS — самой популярной библиотеки JavaScript, которую вы можете изучить в наши дни!
На ваш вкус, слишком много модных словечек?
Это справедливо, но NextJS действительно является отличным выбором для развития в качестве разработчика React и вывода ваших приложений React на новый уровень !
Потому что NextJS быстро растет и поэтому пользуется большим спросом. И для этого есть веские причины: NextJS позволяет создавать приложения React со встроенным рендерингом на стороне сервера и предварительным рендерингом страниц . Создавать удобные для пользователей и удобные для поисковых систем (SEO!) приложения React еще никогда не было так просто!
Кроме того, NextJS чрезвычайно упрощает создание полнофункциональных приложений React (интерфейсный и внутренний код, объединенные в один проект)! Смешайте клиентский и серверный код и создайте API на основе NodeJS параллельно с вашими внешними приложениями React. С NextJS это проще простого!
Хотите добавить аутентификацию ? NextJS также упрощает это и делает регистрацию пользователей, вход в систему и управление сеансами очень удобными.
Этот курс в кратчайшие сроки выведет вас от новичка NextJS до продвинутого уровня!
Мы начнем с самых основ, никаких знаний NextJS вообще не требуется, а затем углубимся во все основные функции, составляющие NextJS. Как в теории, так и в нескольких реальных проектах , где все концепции будут применяться шаг за шагом.
Для этого курса вам потребуются базовые знания React , хотя в курс входит модуль «повторного повышения квалификации по React» на случай, если вы давно не работали с React.
Этот курс также включает модуль «Сводка NextJS» для маршрутизатора Pages и модуль «NextJS Essentials» для маршрутизатора приложений, которые позволяют вам всегда возвращаться к курсу в будущем и освежать свои знания, не проходя весь курс заново. . Или вы просто берете эти сводные модули (и пока пропускаете остальные), чтобы узнать обо всех основных функциях за как можно меньше времени.
После окончания этого курса вы будете хорошо подготовлены к созданию собственных проектов NextJS с нуля и подаете заявку на вакансии NextJS!
Подробно в этом курсе будут рассмотрены:

• Что такое NextJS? И зачем вам это использовать?
• Почему просто React (во многих случаях) недостаточно?
• Создание проектов NextJS с нуля и понимание этих проектов
• Работа с файловой маршрутизацией
• Добавление динамических маршрутов и универсальных маршрутов
• Реализация различных форм предварительного рендеринга страниц и рендеринга на стороне сервера.
• Работа с данными и добавление извлечения и предварительной загрузки данных в ваши приложения.
• Обработка отправки форм с помощью действий сервера
• Обработка загрузки файлов
• Предварительное создание динамических и статических страниц.
• Добавление оптимизаций, таких как метаданные, на страницы
• Оптимизация изображений с помощью компонента NextJS Image
• Создание полнофункциональных приложений с использованием маршрутов API или действий сервера.
• Управление состоянием всего приложения с помощью контекста React (в приложениях NextJS)
• Добавление аутентификации в приложения NextJS
• Несколько полноценных приложений, в которых мы применим все эти основные концепции!
• Полный модуль обновления React.js (чтобы мы все были на одной странице)
• Сводный модуль NextJS, позволяющий освежить изученное или просто быстро изучить основные функции.
• И многое другое!

Мне не терпится начать это путешествие вместе с вами!

Для кого этот курс:​

• Разработчики React, которые хотят сделать следующий шаг и создать готовые к использованию приложения React.
• Разработчики React, которые стремятся создавать полнофункциональные приложения React.
• Веб-разработчики в целом, которые хотят работать с одним из самых популярных и востребованных технологических стеков.

Спойлер: Список уроков

Welcome to the Course!
What Is Next.js? And Why Would You Use It?
Key Feature: Server-side Page (Pre-)Rendering
Key Feature: File-based Routing
Key Feature: Build Fullstack React Apps!
Creating a NextJS Project & Setting Up Our IDE
About the "App Router"
Analyzing The Created Project
A First Demo: NextJS In Action!
About This Course & Course Outline
Taking This Course: Your Two Options
How To Get The Most Out Of This Course
Module Introduction
What is ReactJS?
Why ReactJS & A First Demo
Building Single-Page Applications (SPAs)
React Alternatives
Creating a New React Project
Setting Up A Code Editor
Diving Into The Created Project
How React Works & Understanding Components
More Component Work & Styling With CSS Classes
Building & Re-using Components
Passing Data With Props & Dynamic Content
Handling Events
Adding More Components
Introducing State
Working with "Event Props"
Adding Routing
Adding Links & Navigation
Scoping Component Styles With CSS Modules
Outputting Lists Of Data & Components
Adding Even More Components
Creating "Wrapper" Components
Working With Forms
Getting User Input & Handling Form Submission
Preparing The App For Http Requests & Adding a Backend
Sending a POST Http Request
Navigating Programmatically
Getting Started with Fetching Data
Using the "useEffect" Hook
Introducing React Context
Updating State Based On Previous State
Using Context In Components
More Context Usage
Module Summary
Module Introduction
Our Starting Setup
What Is "File-based Routing"? And Why Is It Helpful?
Adding A First Page
Adding a Named / Static Route File
Working with Nested Paths & Routes
Adding Dynamic Paths & Routes
Extracting Dynamic Path Segment Data (Dynamic Routes)
Building Nested Dynamic Routes & Paths
Adding Catch-All Routes
Navigating with the "Link" Component
Navigating To Dynamic Routes
A Different Way Of Setting Link Hrefs
Navigating Programmatically
Adding a Custom 404 Page
Module Summary
Module Introduction
Planning The Project
Setting Up The Main Pages
Adding Dummy Data & Static Files
Adding Regular React Components
Adding More React Components & Connecting Components
Styling Components In Next.js Projects
Adding Buttons & Icons
Adding the "Event Detail" Page (Dynamic Route)
Adding a General Layout Wrapper Component
Working on the "All Events" Page
Adding a Filter Form for Filtering Events
Navigating to the "Filtered Events" Page Progammatically
Extracting Data on the Catch-All Page
Final Steps
Module Summary
Module Introduction
The Problem With Traditional React Apps (and Data Fetching)
How NextJS Prepares & Pre-renders Pages
Introducing Static Generation with "getStaticProps"
NextJS Pre-renders By Default!
Adding "getStaticProps" To Pages
Running Server-side Code & Using the Filesystem
A Look Behind The Scenes
Utilizing Incremental Static Generation (ISR)
ISR: A Look Behind The Scenes
A Closer Look At "getStaticProps" & Configuration Options
Working With Dynamic Parameters
Introducing "getStaticPaths" For Dynamic Pages
Using "getStaticPaths"
"getStaticPaths" & Link Prefetching: Behind The Scenes
Working With Fallback Pages
Loading Paths Dynamically
Fallback Pages & "Not Found" Pages
Introducing "getServerSideProps" for Server-side Rendering (SSR)
Using "getServerSideProps" for Server-side Rendering
"getServerSideProps" and its Context
Dynamic Pages & "getServerSideProps"
"getServerSideProps": Behind The Scenes
Introducing Client-Side Data Fetching (And When To Use It)
Implementing Client-Side Data Fetching
Using the "useSWR" NextJS Hook
Combining Pre-Fetching With Client-Side Fetching
Module Summary
Module Introduction
Preparations
Adding Static Site Generation (SSG) On The Home Page
Loading Data & Paths For Dynamic Pages
Optimizing Data Fetching
Working on the "All Events" Page
Using Server-side Rendering (SSR)
Adding Client-Side Data Fetching
Module Summary
Module Introduction
Analyzing the Need for "head" Metadata
Configuring the "head" Content
Adding Dynamic "head" Content
Reusing Logic Inside A Component
Working with the "_app.js" File (and Why)
Merging "head" Content
The "_document.js" File (And What It Does)
A Closer Look At Our Images
Optimizing Images with the "Next Image" Component & Feature
Taking A Look At The "Next Image" Documentation
Module Summary
Module Introduction
What are "API Routes"?
Writing Our First API Route
Preparing the Frontend Form
Parsing The Incoming Request & Executing Server-side Code
Sending Requests To API Routes
Using API Routes To Get Data
Using API Routes For Pre-Rendering Pages
Creating & Using Dynamic API Routes
Exploring Different Ways Of Structuring API Route Files
Module Summary
Module Introduction
Starting Setup & A Challenge For You!
Adding a Newsletter Route
Adding Comments API Routes
Connecting the Frontend To the Comments API Routes
Setting Up A MongoDB Database
Running MongoDB Queries From Inside API Routes
Inserting Comments Into The Database
Getting Data From The Database
Adding Error Handling
More Error Handling
Module Summary
Module Introduction
Our Target State & Starting Project
Creating a New React Context
Adding Context State
Using Context Data In Components
Example: Triggering & Showing Notifications
Example: Removing Notifications (Automatically)
Challenge Solution
Module Summary
Module Introduction
Setting Up The Core Pages
Getting Started With The Home Page
Adding The "Hero" Component
Adding Layout & Navigation
Time To Add Styling & A Logo
Starting Work On The "Featured Posts" Part
Adding A Post Grid & Post Items
Rendering Dummy Post Data
Adding the "All Posts" Page
Working On The "Post Detail" Page
Rendering Markdown As JSX
Adding Markdown Files As A Data Source
Adding Functions To Read & Fetch Data From Markdown Files
Using Markdown Data For Rendering Posts
Rendering Dynamic Post Pages & Paths
Rendering Images With The "Next Image" Component (From Markdown)
Rendering Code Snippets From Markdown
Preparing The Contact Form
Adding The Contact API Route
Sending Data From The Client To The API Route
Storing Messages With MongoDB In A Database
Adding UI Feedback With Notifications
Adding "head" Data
Adding A "_document.js" File
Using React Portals
Module Summary
Module Introduction
Building NextJS Apps: Your Options
Key Deployment Steps
Checking & Optimizing Our Code
The NextJS Config File & Working With Environment Variables
Running a Test Build & Reducing Code Size
A Full Deployment Example (To Vercel)
A Note On Github & Secret Credentials
Using the "export" Feature
Module Summary
Module Introduction
Our Starting Project
How Does Authentication Work (In React & NextJS Apps)?
Using The "next-auth" Library
Adding A User Signup API Route
Sending Signup Requests From The Frontend
Improving Signup With Unique Email Addresses
Adding the "Credentials Auth Provider" & User Login Logic
Sending a "Signin" Request From The Frontend
Managing Active Session (On The Frontend)
Adding User Logout
Adding Client-Side Page Guards (Route Protection)
Adding Server-Side Page Guards (And When To Use Which Approach)
Protecting the "Auth" Page
Using the "next-auth" Session Provider Component
Analyzing Further Authentication Requirements
Protecting API Routes
Adding the "Change Password" Logic
Sending a "Change Password" Request From The Frontend
Module Summary & Final Steps
Module Introduction
What is NextJS?
Key Feature: Server-side (Pre-) Rendering of Pages
Key Feature: File-based Routing
Key Feature: Build Fullstack Apps With Ease
Creating a NextJS Project & IDE Setup
About the "App Router"
Analyzing the Created Project
Adding First Pages To The Project
Adding Nested Pages / Paths
Creating Dynamic Pages
Extracting Dynamic Route Data
Linking Between Pages
Onwards To A Bigger Project!
Preparing Our Project Pages
Rendering A List Of (Dummy) Meetups
Adding A Form For Adding Meetups
The "_app.js" File & Wrapper Components
Programmatic Navigation
Adding Custom Components & Styling With CSS Modules
How NextJS Page Pre-Rendering Actually Works
Introducing Data Fetching For Page Generation (getStaticProps)
More Static Site Generation (SSG) With getStaticProps
Exploring getServerSideProps
Working With Dynamic Path Params In getStaticProps
Dynamic Pages & getStaticProps & getStaticPaths
Introducing API Routes
Connecting & Querying a MongoDB Database
Sending HTTP Requests To API Routes
Getting Data From The Database (For Page Pre-Rendering)
Getting Meetup Detail Data & Paths
Adding "head" Metadata To Pages
Deploying NextJS Projects
Working With Fallback Pages & Re-Deploying
Module Summary
Course Roundup

Материал на английском языке



Продажник:

Для просмотра вы должны войти или зарегистрироваться.

Скачать: