[udemy] Next.js 14 и React — полное руководство (2024)

[Ho Lee Fuk]

Автор: udemy

Название: Next.js 14 и React — полное руководство (2024)

Описание:

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, позволяющий освежить изученное или просто быстро изучить основные функции.
- И многое другое!

Мне не терпится начать это путешествие вместе с вами! data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

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

- Разработчики 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

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

Подробнее:

Скачать:

Качать без ограничений Купить доступ за ₸3.000,00