English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 9h 45m | 4.26 GB
Learn Next.js by building a music event website
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 as a static site generator. I will be adding a completely static blog project within a month of initial release and possibly a third project in the future
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
All of the final code will be provided in the project repos and all needed resources will be provided in the sections
What you’ll learn
- 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
- Static site generation
Table of Contents
Introduction
1 Welcome To The Course
2 What Is Next.js
3 Main Project Overview
4 Environment & Tools
5 Final Code Repo Links
Next.js Fundamentals
6 Creating a Next.js App
7 Pages & Routing
8 Next Link & Router
9 Head Tags & Layout
10 Header & Footer
11 Custom 404 Page
12 Module Aliases With jsconfig
13 Showcase Component
Data Fetching
14 API Routes
15 getServerSideProps & getStaticProps
16 DIsplaying Events
17 getStaticPaths
18 Single Event Page
Strapi Backend
19 Strapi CMS Setup
20 Cloudinary For Images
21 Event Content Type
Events Functionality – Part 1
22 Connecting to the Strapi API
23 Search Page Using Filters
24 Search Component
25 Add Event Page
26 Event Submit & React Toastify
27 Create a Slug
Events Functionality – Part 2
28 Delete Events
29 Edit Event & Image Preview
30 Modal Component
31 Image Upload
32 Events Pagination
Authentication, JWT & HttpOnly Cookies
33 Register & Login Forms
34 Auth Context
35 Our JWT Strategy Explained
36 Login & Get JWT
37 Store JWT In Server HttpOnly Cookie
38 Persist Logged In User
39 Logout & Destroy Cookie
40 Register User
Authorization & Access
41 Custom User Events Endpoint
42 Gettting User Events For Dashboard
43 Display Dashboard Events
44 Create Is Owner Policy For Events
45 Associating Events With Users
46 Authenticated Edit, Delete & Image Upload
Extras & Deployment
47 Add Map to Event Pages
48 Strapi Backend Deploy – Heroku
49 Next.js Deploy – Vercel
Project 2 – DevSpace Static Markdown Blog
50 Project Intro
51 Markdown – What & Why
52 Markdown Crash Course
53 Project Repo Link
54 Next.js & TailwindCSS Setup
55 Layout Component
56 Header & Tailwind Styling
57 About & 404 Page
Fetch, Parse & Display Markdown Posts
58 Blog Post Markdown Files
59 Get Posts & Parse Frontmatter
60 Display Posts
61 Sort Posts By Date
62 Category Label Component
63 Generate Static Paths & Single Post Data
64 Display Single Blog Post
Pagination & Category Pages
65 Start Pagination – Generate Paths
66 Fetch Paginated Posts
67 Pagination Links Component
68 Category Pages
69 Clean Up Get Posts
70 Category Sidebar
71 Next Export & Limitations
Search, Caching Posts & Deployment
72 How Search Will Work
73 Search Component
74 Search API Route
75 Search Results Components
76 First Deployment
77 Cache Posts
78 Pre-Commit Hook With Husky
79 Wrap Up
Resolve the captcha to access the links!