Mô tả

Next.js is a framework for building server-side rendered React websites as well as static websites. This is a project-based course for learning Next.js. We will build a music events application that will give you the foundational knowledge that you need to create your own applications. We will use Strapi (a headless CMS) as our backend but you could just as well use anything

We will learn the fundamentals of Next.js like...

  • Pages & Routing

  • Data Fetching Methods - getServerSideProps, getStaticProps, getStaticPaths

  • Custom API Routes

  • Static Generation

  • CSS Styling

  • Image Optimization

In our main project, we will also be working with...

  • Strapi CMS

  • Authentication with JWT (JSON Web Tokens)

  • Authorization and access control

  • Storing HttpOnly Cookies on the server

  • Pagination, search filters, etc

  • Image uploading with Cloudinary integration

  • Deploying to Vercel and Heroku

Next.js can also be used to create "static websites". The second project is a static blog called Devspace

  • TaiilwindCSS Integration

  • Static Data Fetching/Generation

  • Create, Fetch & Parse Markdown with Frontmatter

  • Search Functionality with API route/Serverless Function

  • Post Caching

  • Git Hooks with Husky

  • Deploy to Vercel

What should you know before taking this course?

You should know JavaScript basics and modern JavaScript features like arrow functions, restructuring, the spread operator

You should also know the basics of React. I will not be explaining things like components, props, JSX


Resources:

All of the final code will be provided in the project repos and all needed resources will be provided in the sections

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

Build a music event application from start to finish

Learn the fundamentals of NextJS

Create a backend using Strapi CMS

JWT Authentication / HttpOnly Cookie Storage

Pagination, search, image uploading with Cloudinary

Build a static blog with pagination, search & categories using Markdown

Deploy to production using Vercel

Yêu cầu

  • Modern JavaScript
  • The basics of React

Nội dung khoá học

13 sections

Introduction

5 lectures
Welcome To The Course
01:48
What Is Next.js?
04:37
Main Project Overview
03:30
Environment & Tools
03:48
Final Code Repo Links
00:04

Next.js Fundamentals

8 lectures
Creating a Next.js App
07:03
Pages & Routing
07:53
Next Link & Router
05:44
Head Tags & Layout
09:13
Header & Footer
07:35
Custom 404 Page
04:19
Module Aliases With jsconfig
03:08
Showcase Component
04:35

Data Fetching

5 lectures
API Routes
09:52
getServerSideProps & getStaticProps
09:48
DIsplaying Events
10:02
getStaticPaths
08:24
Single Event Page
08:51

Strapi Backend

3 lectures
Strapi CMS Setup
06:05
Cloudinary For Images
04:42
Event Content Type
11:16

Events Functionality - Part 1

6 lectures
Connecting to the Strapi API
08:01
Search Page Using Filters
08:31
Search Component
05:17
Add Event Page
11:20
Event Submit & React Toastify
08:41
Create a Slug
03:26

Events Functionality - Part 2

5 lectures
Delete Events
03:51
Edit Event & Image Preview
09:54
Modal Component
12:39
Image Upload
12:20
Events Pagination
12:12

Authentication, JWT & HttpOnly Cookies

8 lectures
Register & Login Forms
14:09
Auth Context
14:49
Our JWT Strategy Explained
05:25
Login & Get JWT
14:21
Store JWT In Server HttpOnly Cookie
05:47
Persist Logged In User
07:20
Logout & Destroy Cookie
04:01
Register User
05:05

Authorization & Access

6 lectures
Custom User Events Endpoint
07:33
Gettting User Events For Dashboard
05:00
Display Dashboard Events
08:56
Create Is Owner Policy For Events
06:37
Associating Events With Users
04:42
Authenticated Edit, Delete & Image Upload
08:59

Extras & Deployment

3 lectures
Add Map to Event Pages
12:15
Strapi Backend Deploy - Heroku
16:38
Next.js Deploy - Vercel
11:44

Project 2 - DevSpace Static Markdown Blog

8 lectures
Project Intro
02:57
Markdown - What & Why?
04:07
Markdown Crash Course
06:34
Project Repo Link
00:02
Next.js & TailwindCSS Setup
06:06
Layout Component
05:17
Header & Tailwind Styling
09:17
About & 404 Page
06:35

Fetch, Parse & Display Markdown Posts

7 lectures
Blog Post Markdown Files
03:47
Get Posts & Parse Frontmatter
08:02
Display Posts
13:49
Sort Posts By Date
03:25
Category Label Component
06:50
Generate Static Paths & Single Post Data
10:04
Display Single Blog Post
08:06

Pagination & Category Pages

7 lectures
Start Pagination - Generate Paths
09:16
Fetch Paginated Posts
05:06
Pagination Links Component
09:15
Category Pages
13:31
Clean Up Get Posts
06:20
Category Sidebar
11:17
Next Export & Limitations
06:00

Search, Caching Posts & Deployment

8 lectures
How Search Will Work
02:46
Search Component
04:56
Search API Route
09:34
Search Results Components
09:15
First Deployment
03:09
Cache Posts
06:37
Pre-Commit Hook With Husky
06:28
Wrap Up
05:12

Đá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.