【Udemy高分付费课程】Next.js 和 React - 完整开发指南 学习并使用Next.js搭建全栈应用程序（中英文字幕）上

002 What Is Next.js_ And Why Would You Use It_

003 Key Feature_ Server-side Page (Pre-)Rendering

004 Key Feature_ File-based Routing

005 Key Feature_ Build Fullstack React Apps!

007 Creating a NextJS Project & Setting Up Our IDE

008 Analyzing The Created Project

009 A First Demo_ NextJS In Action!

010 About This Course & Course Outline

011 Taking This Course_ Your Two Options

012 How To Get The Most Out Of This Course

014 Module Introduction

015 What is ReactJS_

016 Why ReactJS & A First Demo

017 Building Single-Page Applications (SPAs)

018 React Alternatives

019 Creating a New React Project

020 Setting Up A Code Editor

021 Diving Into The Created Project

022 How React Works & Understanding Components

023 More Component Work & Styling With CSS Classes

024 Building & Re-using Components

025 Passing Data With Props & Dynamic Content

026 Handling Events

027 Adding More Components

028 Introducing State

029 Working with _Event Props_

030 Adding Routing

031 Adding Links & Navigation

032 Scoping Component Styles With CSS Modules

033 Outputting Lists Of Data & Components

034 Adding Even More Components

035 Creating _Wrapper_ Components

036 Working With Forms

037 Getting User Input & Handling Form Submission

038 Preparing The App For Http Requests & Adding a Backend

039 Sending a POST Http Request

040 Navigating Programmatically

041 Getting Started with Fetching Data

042 Using the _useEffect_ Hook

043 Introducing React Context

044 Updating State Based On Previous State

045 Using Context In Components

046 More Context Usage

047 Module Summary

049 Module Introduction

050 Our Starting Setup

051 What Is _File-based Routing__ And Why Is It Helpful_

052 Adding A First Page

053 Adding a Named _ Static Route File

054 Working with Nested Paths & Routes

055 Adding Dynamic Paths & Routes

056 Extracting Dynamic Path Segment Data (Dynamic Routes)

057 Building Nested Dynamic Routes & Paths

058 Adding Catch-All Routes

059 Navigating with the _Link_ Component

060 Navigating To Dynamic Routes

061 A Different Way Of Setting Link Hrefs

062 Navigating Programmatically

063 Adding a Custom 404 Page

064 Module Summary

066 Module Introduction

067 Planning The Project

068 Setting Up The Main Pages

069 Adding Dummy Data & Static Files

070 Adding Regular React Components

071 Adding More React Components & Connecting Components

072 Styling Components In Next.js Projects

073 Adding Buttons & Icons

074 Adding the _Event Detail_ Page (Dynamic Route)

075 Adding a General Layout Wrapper Component

076 Working on the _All Events_ Page

077 Adding a Filter Form for Filtering Events

078 Navigating to the _Filtered Events_ Page Progammatically

079 Extracting Data on the Catch-All Page

080 Final Steps

081 Module Summary

083 Module Introduction

084 The Problem With Traditional React Apps (and Data Fetching)

085 How NextJS Prepares & Pre-renders Pages

086 Introducing Static Generation with _getStaticProps_

087 NextJS Pre-renders By Default!

088 Adding _getStaticProps_ To Pages

089 Running Server-side Code & Using the Filesystem

090 A Look Behind The Scenes

091 Utilizing Incremental Static Generation (ISR)

092 ISR_ A Look Behind The Scenes

093 A Closer Look At _getStaticProps_ & Configuration Options

094 Working With Dynamic Parameters

095 Introducing _getStaticPaths_ For Dynamic Pages

096 Using _getStaticPaths_

097 _getStaticPaths_ & Link Prefetching_ Behind The Scenes

098 Working With Fallback Pages

099 Loading Paths Dynamically

100 Fallback Pages & _Not Found_ Pages

101 Introducing _getServerSideProps_ for Server-side Rendering (SSR)

102 Using _getServerSideProps_ for Server-side Rendering

103 _getServerSideProps_ and its Context

104 Dynamic Pages & _getServerSideProps_

105 _getServerSideProps__ Behind The Scenes

106 Introducing Client-Side Data Fetching (And When To Use It)

107 Implementing Client-Side Data Fetching

108 Using the _useSWR_ NextJS Hook

109 Combining Pre-Fetching With Client-Side Fetching

110 Module Summary

112 Module Introduction

113 Preparations

114 Adding Static Site Generation (SSG) On The Home Page

115 Loading Data & Paths For Dynamic Pages

116 Optimizing Data Fetching

117 Working on the _All Events_ Page

118 Using Server-side Rendering (SSR)

119 Adding Client-Side Data Fetching

120 Module Summary

122 Module Summary

123 Analyzing the Need for _head_ Metadata

124 Configuring the _head_ Content

125 Adding Dynamic _head_ Content

126 Reusing Logic Inside A Component

127 Working with the __app.js_ File (and Why)

128 Merging _head_ Content

129 The __document.js_ File (And What It Does)

130 A Closer Look At Our Images

131 Optimizing Images with the _Next Image_ Component & Feature

132 Taking A Look At The _Next Image_ Documentation

133 Module Summary

135 Module Introduction

136 What are _API Routes__

137 Writing Our First API Route

138 Preparing the Frontend Form

139 Parsing The Incoming Request & Executing Server-side Code

140 Sending Requests To API Routes

141 Using API Routes To Get Data

142 Using API Routes For Pre-Rendering Pages

143 Creating & Using Dynamic API Routes

144 Exploring Different Ways Of Structuring API Route Files

145 Module Summary

147 Module Introduction

148 Starting Setup & A Challenge For You!

149 Adding a Newsletter Route

150 Adding Comments API Routes

151 Connecting the Frontend To the Comments API Routes

152 Setting Up A MongoDB Database

153 Running MongoDB Queries From Inside API Routes

154 Inserting Comments Into The Database

155 Getting Data From The Database

157 Adding Error Handling

158 More Error Handling

159 Module Summary

161 Module Introduction

162 Our Target State & Starting Project

163 Creating a New React Context

164 Adding Context State

165 Using Context Data In Components

166 Example_ Triggering & Showing Notifications

167 Example_ Removing Notifications (Automatically)

168 Challenge Solution

169 Module Summary

171 Module Introduction

172 Setting Up The Core Pages

173 Getting Started With The Home Page

174 Adding The _Hero_ Component

175 Adding Layout & Navigation

176 Time To Add Styling & A Logo

177 Starting Work On The _Featured Posts_ Part

178 Adding A Post Grid & Post Items

179 Rendering Dummy Post Data

180 Adding the _All Posts_ Page

181 Working On The _Post Detail_ Page

182 Rendering Markdown As JSX

183 Adding Markdown Files As A Data Source

184 Adding Functions To Read & Fetch Data From Markdown Files

185 Using Markdown Data For Rendering Posts

186 Rendering Dynamic Post Pages & Paths

187 Rendering Images With The _Next Image_ Component (From Markdown)

188 Rendering Code Snippets From Markdown

189 Preparing The Contact Form

190 Adding The Contact API Route

191 Sending Data From The Client To The API Route

192 Storing Messages With MongoDB In A Database

193 Adding UI Feedback With Notifications

194 Adding _head_ Data

195 Adding A __document.js_ File

196 Using React Portals

197 Module Summary

199 Module Introduction

200 Building NextJS Apps_ Your Options

201 Key Deployment Steps

202 Checking & Optimizing Our Code

203 The NextJS Config File & Working With Environment Variables

204 Running a Test Build & Reducing Code Size

205 A Full Deployment Example (To Vercel)

206 A Note On Github & Secret Credentials

207 Using the _export_ Feature

208 Module Summary

210 Module Introduction

211 Our Starting Project

212 How Does Authentication Work (In React & NextJS Apps)_

213 Using The _next-auth_ Library

214 Adding A User Signup API Route