Mô tả

Unlock the full potential of modern web development with our comprehensive Next.js course. Dive into the creation of multiple real-world projects, each designed to reinforce essential concepts and techniques.

From the basics of setting up your development environment to deploying polished, production-ready applications, this course covers it all.

You will embark on a journey through the robust features of Next.js, learning how to construct applications that are not only fast but also rank well due to their SEO-friendly architecture.

In this course we will build 2 completes applications.

A Flash news App ( Front-end)
A Code snippet Manager App ( Front-end + Back-end)

Discover how to  implement authentication seamlessly, connect with  databases, and create scalable APIs that can handle the demands of heavy traffic. Validate your forms safely. Make your app support multiple languages and much more.

Each project in this course is an opportunity to apply what you've learned in a practical context, ensuring you gain hands-on experience.

We will tackle challenges such as user authentication, database integration, API creation, and optimization for search engines.

By the end of this course, you will have the skills to build applications that are both performant and maintainable, with a deep understanding of how Next.js can be used to its full potential. Whether you're looking to elevate your current skill set or build scalable solutions for the web, this course is your gateway to becoming a proficient Next.js developer.


Sumary of the course :

- Next.JS basics

   - Server side rendering

   - Client side rendering

   - Incremental static generation
   - Client components

   -Server components

  - Static generation

- Build a Front-end app with Next.JS

- Build a Full-Stack app with Next.JS

- Build a Rest API with Next.JS

- Securize your app with an authentication with Clerk

- Setup and use a Supabase postgrsql database

- Communicate with your database using Prisma

- Zod to sécurize user inputs in forms and API 

- React hook form to handle the front-end forms validations.

- Create an REST API in Next.JS with Route handles

- Server actions and and Form actions

- Full internationalisation with next intl i18N


With each video associated to a code branch and as always step by step and in a casual way. 

Robin.

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

Set Up and Configure a NextJS project

Develop a Complete Web Application Using NextJS

mplement Server-Side Rendering (SSR) and Static Site Generation (SSG)

Create Dynamic and Static Routes

Utilize Built-In APIs and Middleware

Deploy and Optimize NextJS Applications

Improve the SEO

Handle State Management in a NextJS Application

Create and Style Components

Implement Authentication and Authorization

Connect to Backend Services and Databases

Yêu cầu

  • You already followed a React course
  • Basic understanding of Typescript : You can check my Typescript course ;)
  • Tailwind is a +

Nội dung khoá học

5 sections

Introduction

5 lectures
Requirement
02:52
Next.JS
03:34
A quick refresher about client/server
04:41
Client side rendering
04:31
Server side rendering
03:25

Front end project - Flash news project

39 lectures
Preview
01:30
NodeJS & NPM version
00:09
Create a Next.JS project
08:43
App router folder and Page router folder
01:39
Routing system
05:09
The layout.tsx file
06:57
Nav
10:10
Nav items
10:17
Static Site Generation (SSG)
05:39
What about the link to the home page ?
00:10
Navigation and params
10:32
Client components
07:46
Json server : important informations
00:10
Setup API with json-server
09:38
Server side data fetching
10:27
Environment variables
05:44
Cache and revalidations
10:32
Card component
17:16
Article list
07:34
Image fallback
07:35
Optimized fonts
04:45
Metadata
02:37
Articles by category
07:35
Static generation for dynamics route segments
07:38
Handle loading with loading.tsx
05:28
Handle pages errors with error.tsx
04:13
Fetching an article by title
07:05
Displaying an article
11:08
Page not found with not-found.tsx
08:12
Templates with template.tsx
10:10
Summarize Templates in 2 sentences
00:12
Hydratation Missmatch
07:49
Clock component
03:37
Crytpo news api
07:05
Crypto card
12:13
Get rid of shiftings
05:45
Data Streaming explained
06:42
Streaming with Suspense
11:47
A website with 100/100 Lighthouse score
05:19

Full stack project - Code Snippet manager

37 lectures
Project overview
05:03
Project setup
06:35
Understanding all the project's actors
04:51
Header component
04:07
Auth - Setup Clerk part 1
03:37
Auth - What is a middleware / Setup Clerk part 2
11:01
Auth - Custom auth pages
10:02
Auth - Styling auth
10:50
Auth - Account management and signout
02:22
Database - Supabase database setup
06:21
Database - Prisma and model setup
08:32
Database - Accessing database using prisma
08:08
API - CRUD overview
01:45
API - Creating your first public API endpoint
11:03
API - Body and URI params
12:52
API - Query params
05:02
API - Zod validation
13:51
API - Auth protection
05:03
Nav
13:32
Searchbar and useRouter
15:29
Card component
15:30
Toast
01:29
Snippet List
09:09
Snippet list by technology
02:04
Filtering the lists
07:19
Fetch a unique snippet
06:19
Synthax Highlighter component
09:02
Actions buttons
08:04
Delete dialog
12:47
Delete : Fixing the refresh issue
01:11
Let's summarize data fetching architecture
05:15
Create form
09:29
Hook form basics
10:32
Hook form with zod
04:26
Hook form validation : Create snippet form
12:36
Submit a form
06:27
Update a snippet
14:40

Multiple languages with I18n - next-intl

4 lectures
Setup next intl
15:11
Translating texts
10:06
Translating clerk components
03:22
Language switcher
06:25

Form actions

1 lectures
Handling form on the server only
13:02

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