English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 100 lectures (8h 29m) | 3.49 GB
Develop static websites and hybrid (static+SSR) web apps with React and Next.js, including Tailwind CSS, React Query
Described as “The React Framework for Production”, Next.js makes it easy to build highly optimized web applications in React.
This course will guide you through learning Next.js by developing two examples: a fully static website, and a hybrid (static + server-side rendered) app.
The first example, a personal blog website, will introduce you to fundamental Next.js concepts such as pre-rendering, file-system based routing, and hydration.
It will show you how to load data in pages that are statically generated at build time, and how to style your pages in global CSS files or with the styled-jsx library that provides component-scoped styles.
The Deployment section will present you all the options for running your application in production, from fully-managed serverless platforms like Vercel to configuring your own Linux servers.
The second example you will develop is a shop website. This will be a more complex application that loads its data from a Headless CMS (Strapi) and uses advanced Next.js features such as Incremental Static Regeneration to automatically reflect changes in the backend data.
It will show you how to enable TypeScript support in a Next.js project if you wish to do so. Using TypeScript is optional; all but one of the videos use plain JavaScript. But you will find the full TypeScript code for the shop example in a GitHub repository if you prefer TypeScript.
The website will use the popular Tailwind CSS library for styling, and the Next Image component for image optimization.
You will see different ways to load data from an external API, including writing your own API routes in Next.js, and how to choose the best approach for your specific requirements.
The example will include a secure authentication system based on JWT and cookies, and the React Query library will be used for caching data on the client side.
The full source code for all examples is provided, with an easy way to see the changes made in every lecture.
The course can be followed with the latest Next.js 13. Note that experimental features, like the beta app directory, are not covered.
What you’ll learn
- Develop web applications with Next·js
- Style components with styled-jsx or Tailwind CSS
- Build fully static websites or hybrid (static + SSR) apps
- Fetch data from a remote API such as a Headless CMS
- Implement cookie-based JWT authentication
- Cache data with React Query
Table of Contents
Getting Started
1 Next Blog Overview
2 Required Tools
3 Updates and Corrections
4 Nextjs Project Setup
5 Source Code
6 Prerendering
7 Development vs Production Server
Routing and Navigation
8 Adding New Pages
9 Next Link Component
10 Shared NavBar Component
11 Custom App Component
12 Next Head Component
Styling
13 Global Styles
14 Component Styles with Styled JSX
15 Images and Other Assets
Loading Data
16 First Post Page
17 Markdown Syntax
18 getStaticProps Function
19 getStaticProps in Production Mode
20 Reading a File
21 Lib Module
22 Rendering Markdown
23 Front Matter
24 Dynamic Route and getStaticPaths
25 Listing Files in a Folder
26 Listing Posts
27 Dynamic Routes in Production Mode
Clientside Functionality
28 ThemeSwitch Component
29 Dark Mode Styles
30 DarkTheme Component
31 Hydration
32 Saving Preferences to Local Storage
33 Feature Detection
Deployment
34 Deployment Options
35 Vercel Platform
36 Exporting as a Static Website
37 Linux Server with Nginx
38 Linux Server with Nodejs
Next Shop Setup
39 Next Shop Overview
40 Create Next App
41 TypeScript Support
42 Source Code
43 Tailwind CSS Setup
44 UtilityFirst CSS
45 Highlevel Architecture
46 Strapi Headless CMS
47 Note Strapi Version
48 Backend Setup
Data Fetching
49 Displaying Products
50 Fetching Data Serverside
51 Fetching Data Clientside
52 Incremental Static Regeneration
53 Serverside Rendering
54 API Routes
55 Calling API Routes
56 Choosing a Data Fetching Strategy
57 Product Page Links
58 Product Page
59 Regenerating Product Pages
60 Ondemand Revalidation
61 Fallback Blocking
62 Fallback and Page Not Found
63 Shared fetchJson function
64 Custom Error Class
65 Environment Variables
Responsive Design and Image Optimization
66 Product Card
67 Responsive Grid
68 Product Images
69 Next Image Component
70 Responsive Product Page
Authentication
71 Strapi Authentication
72 Common Page Component
73 Sign In Form
74 Form State and Validation
75 Sign In API Request
76 Error and Loading States
77 API Route with POST
78 Login API Route
79 Setting a Cookie
80 NavBar with Authentication
81 User API Route
82 Loading User Data
83 Signing Out
React Query
84 Why React Query
85 useQuery Hook
86 useUser Custom Hook
87 useMutation Hook
88 Updating the Query Cache
89 useSignIn Custom Hook
90 useSignOut Custom Hook
Shopping Cart Exercises
91 Cart Items Collection
92 Cart Page
93 Cart API Route
94 Fetching Cart Items
95 Displaying Cart Items
96 POST Cart Handler
97 Add to Cart Widget
98 Add to Cart Mutation
99 Wrap Up
Conclusion
100 Congratulations and Bonus
Resolve the captcha to access the links!