Next.js by Example by Udemy
Develop static and full-stack web applications with React and Next.js 14. Includes Tailwind CSS, Strapi CMS, Prisma ORM.
Course Highlights
- Develop web applications with Next·js
- Style components with Tailwind CSS
- Build fully static websites or full-stack applications
- Fetch data from a remote API such as a Headless CMS
- Integrate with an SQL database using Prisma
Skills you will learn!
Curriculum
3 Topics
App vs Pages Router
Required Tools
Updates and Corrections
8 Topics
Project Overview
Creating a Next.js Project
Home Page
Source Code
TypeScript
Page Routes
Exercise: Add More Pages
Nested Layouts
7 Topics
Prerendering
React Server Components
Dev vs Production Server
Link Component
Prefetching
Layout and Navigation
Exercise: Review Links
6 Topics
Styling Solutions
Installing Tailwind CSS
Layout Styling
Color Palette
Heading Component
Import Alias
6 Topics
Static Assets
Image Cards
Font Optimization
Custom Tailwind Font
Exercise: Custom Default Font
Responsive Design
10 Topics
Reading Files
Rendering Markdown
Tailwind CSS Typography
Front Matter
Data Layer Separation
Dynamic Routes
Listing Files
Rendering Arrays
Static Generation for Dynamic Routes
Exercise: Featured Review
4 Topics
Title and Meta Tags
Title Template
Dynamic Metadata
Icon and Metadata Files
5 Topics
Share Link Button
Client Components
Component State
Nested Client Components
Heroicons
5 Topics
Deployment Options
Deploying to Vercel
Static Export
Static Hosting
Self-Hosting
13 Topics
Project Phase 2
Starting Code
Strapi Overview
Preloaded CMS Instance
Fetch API
Strapi API Parameters
Get Reviews From CMS - Step 1
Get Reviews From CMS - Step 2
Get Review From CMS - Step 1
Get Review From CMS - Step 2
Refactoring: Fetch Reviews
Get Slugs From CMS
Static Build with CMS Data
7 Topics
ESLint
Next Image Component
Image Conversion
Lazy Loading and Priority
Exercise: Home Images
Subtitles
Alternative Image Loaders
8 Topics
Dynamic Params
Dynamic Rendering
Page Not Found
Background Revalidation
Fetch Cache and Revalidation
Webhook Route Handler
On-Demand Revalidation
Rendering Strategies Comparison
6 Topics
Query String Parameters
Pagination with Strapi
Page Count
Exercise: Pagination Bar
Search Params and Dynamic Rendering
Exercise: usePathname
10 Topics
Third-Party Components
Client-Only Rendering
Combobox Styles
Combobox Events
Server to Client Props
Client-Side Fetch
Search Route Handler
Calling Route Handlers
Cancelling Requests
Debouncing Requests
5 Topics
Environment Variables
Configurable Image Source
Strapi Cloud
Strapi URL for Testing
Deploying with Environment Variables
9 Topics
Project Phase 3
Starting Code
Comments User Interface
Choosing a Database
Installing Prisma
Defining a Model
Database Queries
Loading Data From the Database
Prisma Client and Dev Server
12 Topics
Forms Before Server Actions
Inline Server Action
Redirect After Post
Revalidate Path
Progressive Enhancement
Client-Side Form Validation
Separate Server Action File
Invoking a Server Action
Displaying Action Errors
Preventing Duplicate Submissions
Aside: useFormState/useFormStatus
Custom Form Hook
4 Topics
Suspense
Skeleton Component
Loading File
End of the App Router Part
5 Topics
Next Blog: Overview
Next.js Project Setup
Source Code
Pre-rendering
Development vs Production Server
5 Topics
Adding New Pages
Next Link Component
Shared NavBar Component
Custom App Component
Next Head Component
3 Topics
Global Styles
Component Styles with Styled JSX
Images and Other Assets
12 Topics
First Post Page
Markdown Syntax
getStaticProps Function
getStaticProps in Production Mode
Reading a File
Lib Module
Rendering Markdown
Front Matter
Dynamic Route and getStaticPaths
Listing Files in a Folder
Listing Posts
Dynamic Routes in Production Mode
6 Topics
ThemeSwitch Component
Dark Mode Styles
DarkTheme Component
Hydration
Saving Preferences to Local Storage
Feature Detection
5 Topics
Deployment Options
Vercel Platform
Exporting as a Static Website
Linux Server with Nginx
Linux Server with Node.js
10 Topics
Next Shop: Overview
Create Next App
TypeScript Support
Source Code
Tailwind CSS Setup
Utility-First CSS
High-level Architecture
Strapi Headless CMS
Note: Strapi Version
Backend Setup
18 Topics
Displaying Products
Fetching Data Server-side
Fetching Data Client-side
Incremental Static Regeneration
Server-side Rendering
API Routes
Calling API Routes
Choosing a Data Fetching Strategy
Product Page Links
Product Page
Regenerating Product Pages
On-demand Revalidation
Fallback: Blocking
Fallback and Page Not Found
Shared fetchJson function
Custom Error Class
Fallback and Backend Unavailable
Environment Variables
5 Topics
Product Card
Responsive Grid
Product Images
Next Image Component
Responsive Product Page
13 Topics
Strapi Authentication
Shared Page Component
Sign In Form
Form State and Validation
Sign In API Request
Error and Loading States
API Route with POST
Login API Route
Setting a Cookie
NavBar with Authentication
User API Route
Loading User Data
Signing Out
7 Topics
Why React Query
useQuery Hook
useUser Custom Hook
useMutation Hook
Updating the Query Cache
useSignIn Custom Hook
useSignOut Custom Hook
9 Topics
Cart Items Collection
Cart Page
Cart API Route
Fetching Cart Items
Displaying Cart Items
POST Cart Handler
Add to Cart Widget
Add to Cart Mutation
Wrap Up
1 Topic
Congratulations and Bonus
Next.js by Example
Related Next.js Courses
Thank You!
Your review has been submitted successfully.