Mô tả

Hey there! I've put together this Next.js 14 course because I know you're looking for something different. Maybe you're aiming for a steady job or dreaming about creating your own apps, but either way, you're starting from square one. No worries about not knowing JavaScript or React; I'll point you to some cool resources to get up to speed.


Projects You’ll Tackle:

  • Portfolio and blog site to show off what you can do.

  • Personal finance app to keep your money matters sorted.


What You'll Learn:

The NextJS framework, but it’s a full package: UI design, keeping track of data, making sure users are who they say they are (and keeping the baddies out), and making everything look good with Tailwind CSS. Plus, we're putting everything online for the world to see.


After This Course:

You’ll be the kind of do-it-all developer everyone wants to hire. You’ll have skills that usually take over a year to learn, and you’ll know how to bring an idea to life, start to finish. I'm sure you'll love NextJS, and you'll enjoy building apps with this framework.


Course Details (The Cool Stuff):

  • Learn When You Want: Jump in whenever; no need to rush. Each bit takes less than 2 hours, and there's always something new to pick up.

  • Skip Around: Each video comes with the code changes, so feel free to hop over parts you already know or dive right into coding.

  • Beginner-Friendly: Totally new to this? Perfect. I’ve got extra help for the basics in JavaScript, React, and SQL.

  • Real Talk: I connect the dots to the resources or docs you need, making sure you're solid on the why and how.


Why My Course Doesn’t Suck:

  • Up-to-Date: No stale content. We're doing things the 2024 way, not the 2010 way.

  • Structured Learning: I’ve seen too many courses where you’re just thrown into the deep end. Not here. We’re building things with a plan.

  • Actually Finishing Projects: Getting your project live online isn’t a mystery I leave you to solve.


How It Works:

  • Your Pace, Your Space: Whether it's 30 minutes a day or an all-nighter, you do you.

  • Projects That Matter: You’ll build real things that you can use and talk about, not just class projects that gather digital dust.

  • Help Along the Way: Got questions? There's source code for every step, slow-talk videos to code along with, and a Discord chat when you're stuck or wanna brag a little.


So, what do you say? Ready to make some internet magic? Let’s get coding and learning Next!

Bạn sẽ học được gì

Next 14 from the Ground Up!

Building Full-Stack Projects

Deploying Projects Live!

Building Websites with Next

Building Web Applications with Next

Yêu cầu

  • Basic Web Skills

Nội dung khoá học

28 sections

Getting Started: Begin Here!

3 lectures
Welcome to the Course!
00:30
What is Next.js and How Did We Get Here?
09:10
What You'll Learn, What You'll Build and Setting Up!
07:13

Getting Started: Creating a Next.js Project and Overview

3 lectures
Section Introduction: Creating a Next.js Project and Overview
00:26
Creating a Next.js Project
07:56
Next.js Project Structure
09:00

Getting Started: Introduction to Git and GitHub

7 lectures
Section Introduction: Introduction to Git and GitHub
00:40
Introduction to Git
06:21
Installing Git on Mac
01:52
Installing Git on Windows
02:32
Installing Git on Linux
00:48
Commiting Changes in Git
05:54
GitHub, Remote Repository, Pushing Changes
09:47

React 101 (Watch if You Are New to React!)

10 lectures
Section Introduction: React 101
00:41
What is React?
05:12
Understanding JSX Syntax
08:08
Components as the Basic UI Building Blocks
05:47
Component Props (Passing Data to Components)
04:13
Responding to Events
05:39
Keeping Component State using Hooks (useState)
07:57
Conditional Rendering
04:37
Rendering List of Elements
05:57
Importing and Exporting Components
03:45

Next.js 101: Routing, Pages & Layouts

6 lectures
Section Introduction: Routing, Pages & Layouts
00:34
File-system Routing & Creating Pages
06:53
Layouts (UI Shared Between Pages)
05:25
Links and Navigation
09:32
Understand Prefetching and Caching
09:36
Dynamic Routes with Parameters
05:15

Next.js 101: Data Fetching (and Caching!)

6 lectures
Section Introduction: Data Fetching (and Caching!)
01:13
How Data Fetching Works in Next.js (Explanation and Recommendations)
06:38
Running a Mock JSON Server
08:25
Actually Fetching Data with fetch inside a Server Component
07:54
Understanding Data Cache and Request Memoization
06:06
Fetch Cache in Practice
06:47

Next.js 101: Dealing with Slow Data Sources (Suspense, Loading UI & Streaming)

6 lectures
Section Introduction: Dealing with Slow Data Sources
01:24
How a Slow Data Source Can Block Your Whole Page!
03:21
Loading UI and Streaming
09:46
Loading UI and React Suspense
03:34
When to Use React Suspense? When Loading UI? Differences?
06:10
About Streaming and SSR
02:16

Next.js 101: Styling With Tailwind and CSS Modules

7 lectures
Section Introduction: Styling With Tailwind and CSS Modules
00:50
Styling Options in Next.js
05:18
Getting Started with Tailwind CSS
09:48
Flex Container & Responsive Design
08:54
Adding a CSS Module and Using Tailwind Inside
04:46
Positioning Elements with Flex
06:12
Using Grid and Making Customizable Components
09:27

Next.js 101: Error Management in Next

8 lectures
Section Introduction: Error Management in Next
01:31
Error Handling on Pages
06:54
Error Boundaries
05:07
Error Hierarchy - Where Does the Error Get Catched?
05:06
Nested Layouts
05:01
Error Handling in Layouts and in the Root Layout
06:22
Recovering from the Errors
04:44
Custom Not Found (404) Page
08:51

Next.js 101: Images and Image Optimizations

8 lectures
Section Introduction: Images and Image Optimizations
00:41
Problems with Images
10:01
Core Web Vitals, LCP, CLS and Optimizing Images
07:13
Adding Image Gallery (Not Optimized Yet!)
09:23
Using the Next <Image> Component for Automatic Optimization
06:56
Responsive Image Size
07:17
Placeholders & Image Quality
06:03
Measuring the Page with Lighthouse
03:10

Next.js 101: Fonts, Dynamic OpenGraph Images, Assets & Metadata (SEO)

8 lectures
Section Introduction: Fonts, OpenGraph, Scrips, Metadata
00:58
Optimizing Fonts with Next.js (Google and Local Fonts!)
05:20
Optimizing Scripts (Connecting with External Services like Analytics, Chatbots)
09:21
Introduction to Metadata
03:24
An Overview of Metadata Attributes
06:40
Static Metadata
04:27
Dynamic Metadata
05:12
Dynamic (OpenGraph) Image Generation
12:26

Blog Project: Markdown and MDX

5 lectures
Section Introduction: Markdown and MDX
01:00
Setting Up Markdown and MDX and First MDX Page!
07:45
Styling MDX - Tailwind Typography
05:21
MDX Remote (Rendering any Markdown)
05:01
Loading MDX From Files (Blog Posts)
03:46

Blog Project: Metadata, Frontmatter, Post List

5 lectures
Section Introduction: Blog Project: Metadata, Frontmatter, Post List
00:21
Metadata #1 - What's Frontmatter and Refactor Time #1
06:20
Metadata #2 - Extracting Frontmatter and Content, Refactor Time #2
09:37
Blog Post List - Fetching Metadata of All Files
11:27
Blog Post List - Links
08:39

Blog Project: Caching, Filtering, Sorting, Pagination

8 lectures
Section Introduction: Caching, Filtering, Sorting, Pagination
00:48
Performance Improvements and Refactoring - Using cache for Memoization
10:43
Tags and Filtering Using Search Query Params
09:02
Sorting Posts - Using Query Params for State #1
09:25
Change Sort Order - Using Query Params for State #2
06:01
Adding Pagination - Using Query Params for State #3
05:32
Pagination Component - Pages #1
08:59
Pagination Component - Links #2
11:24

Blog Project: Custom HTML, Tags, Dark Mode, Cookies

8 lectures
Section Introduction: Custom HTML, Tags, Dark Mode, Cookies
00:43
Customizing HTML Generated from Markdown
06:47
Tags on Blog Post
05:03
Dark Mode Toggling - Component #1
07:17
Dark Mode Toggling - Custom Hook, Setting Dark/Light Mode #2
08:46
Dark Mode Toggling - Using Cookies in Next #3
10:01
Note About Cookies in Server Components and Dynamic Rendering
05:09
Wrapping Up the Project - Home Page
12:57

Blog Project: Going Live! + Performance Tips & Tricks

6 lectures
Section Introduction: Going Live! + Performance Tips & Tricks
00:40
Dynamic Functions Forcing the Dynamic Page Renders
05:43
Using generateStaticParams() to Pre-render Pages
05:13
SearchParams and Static Pre-Rendering?
08:46
Creating a Vercel Account and Deploying Live!
06:38
Adressing Metadata Base and Talking on Edge vs Node Runtimes
05:22

Finance App: Creating UI and Components

11 lectures
Section Introduction: Creating UI and Components
01:27
Creating the Project and Playground
10:42
The Header Component
07:00
Financial Trend Component
11:31
Financial Trend Component - More or Less Money?
09:55
Currency Formatting Hook
04:22
Transaction Item Component
15:09
Transaction Summary Component
06:03
Creating Buttons
10:58
Styling Form Inputs
09:52
Custom React Form Input Components
11:01

Finance App: Dark Mode, Fetching and Displaying Data

9 lectures
Section Introduction: Dark Mode, Fetching and Displaying Data
01:12
Adding Light/Dark Mode Toggle
11:49
Adding JSON Server as Temporary Data Source
06:01
Displaying Transaction List
09:03
Grouping Transactions by Date
14:33
Separator & Loading Skeleton
07:44
Wrapping Transaction Loading in Suspense
10:03
Fetching Finance Trends
10:42
Making a Suspense Fallback for Trends
09:07

Finance App: Forms, Validation, Server Actions

12 lectures
Section Introduction: Forms, Validation, Server Actions
01:06
Adding Transaction Page & Link
11:33
Adding Transaction Form Markup
12:19
Introducing React Hook Form
14:24
Form Validation in React Hook Form
10:12
Introducing the Zod Library
07:22
Adding a Zod Schema for Transactions
12:20
Using Environment Variables
11:03
Storing Form Data
11:14
Server Actions in Action
14:05
Server Actions Explained
07:25
Form Error Component
02:55

Finance App: Adding Supabase, Seeding Data, Handling Errors

10 lectures
Section Introduction: Adding Supabase, Seeding Data, Handling Errors
01:20
What is Supabase?
08:37
Setting Up and Connecting the Next.js Project to Supbase!
19:44
Adding Columns to Transactions Table
03:21
Reading Transactions from Postgres
05:55
Generating Seed Data
19:11
Adding Data to Postgres
08:28
Server Actions - Handling Errors
09:00
Server Actions - Server Data Validation
07:52
Error Boundary for Trend and Removing JSON Server
06:04

Finance App: More Complex Forms, Validation and Database Queries

8 lectures
Section Introduction: More Complex Forms, Validation and Database Queries
01:35
Intermediate Dynamic Forms
07:15
Complex Transformation and Validation with Zod
10:15
Finance Trend - Postgres Function Calculating SUM
11:18
Finance Trend - Calling Postgres Function using RPC
05:49
Transactions Date Range - Selecting Option
11:48
Transactions Date Range - Get Current & Previous Sum in Postgres
18:04
Transactions Date Range - Display the Trend
04:46

Finance App: Transactions Filtering and Pagination

5 lectures
Section Introduction: Transactions Filtering and Pagination
00:49
Fetching Transactions Using Postgres Function
14:40
Refactoring to a Client Component with Server Component Wrapper
13:09
Load More Functionality (Pagination)
13:55
UX Improvements (No More Data, Loading Spinner etc)
12:39

Finance App: Updating and Deleting Data

9 lectures
Section Introduction: Updating and Deleting Data
01:01
Naive Implementation of Delete Transaction Button
10:08
Delete Confirmation & Loading UI
10:24
Removing Transaction from the List
05:13
Handling the Pagination Shift
05:09
Transaction Editing Page & Fetching Transaction Data
07:33
Transaction Editing Form and Handling 404
08:58
Update Transaction Server Action (Updating Data in Supabase)
03:18
Loading UI for the Edit Form
04:14

Finance App: User Authentication (User Accounts, Signing In, Signing Out)

13 lectures
Section Introduction: User Authentication
01:44
Authentication Layout and Page
11:14
Login Form & Invoking Server Action Through Form Submission
06:25
Form Pending State
07:23
Handling Form Server Action Errors
08:51
Supabase Auth Overview and Passwordless Auth (Magic Links)
10:24
How the Authentication Works in Supabase (and in General)
05:14
What's a Route Handler?
07:16
Sign-In Route Handler
07:38
Configuring Supabase Email Templates and Testing the Auth Process
05:26
Is User Authenticated?
07:17
What's a Middleware? Creating a Supabase Token Refresh Middleware
12:23
Signing Users Out
06:37

Finance App: User Authorization (Managing Permissions and Access)

7 lectures
Section Introduction: User Authorization
00:49
What's Authorization?
05:45
Protecting Routes in Middleware
05:38
What's Postgres RLS? How it Integrates with Supabase Auth?
11:10
Link Users with Transactions and INSERT RLS Policy
09:24
Adding RLS Policies for SELECT, UPDATE and DELETE
06:25
Updating the Seeding Script with Users
08:14

Finance App: Uploading and Managing Files

12 lectures
Secion Introduction: Uploading and Managing Files
00:42
Settings Layout and Side Navigation
14:01
Supabase Storage, Buckets and RLS
05:59
Creating a Bucket and Setting up Security Policies
09:38
Image Uploading Form
03:46
Image Uploading Server Action
07:06
Styling the File Input
02:44
Updating the User Metadata
04:38
Displaying User Avatar (Signed URLs)
13:24
Alert Component
07:35
More Graceful Error Handling in Server Actions
06:22
Deleting Files (Old Avatars)
08:46

Finance App: User Settings, Server Side Form Validation

7 lectures
Section Introduction: User Settings, Server Side Form Validation
01:00
Success and Error Alert Components - Refactor
04:24
Scaffolding Settings Page and Form
10:23
User Settings - Inputs and Loading UI
11:39
User Settings - Saving and Applying Settings
07:59
User Settings - Validating Data Server Side using Zod
11:13
Displaying the (Server Side) Validation Errors
06:13

Finance App: Going Live!

1 lectures
Going Live!
07:05

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.