Next.JS - The beginner guide (2024 edition)

Next.JS : The beginner guide (2024 edition), available at $19.99, has an average rating of 4.7, with 86 lectures, based on 24 reviews, and has 187 subscribers.

You will learn about 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 This course is ideal for individuals who are React Developers seeking to expand their skill set to include NextJS for improved performance and SEO in their web projects. or Full-Stack Developers or Front-end Developers It is particularly useful for React Developers seeking to expand their skill set to include NextJS for improved performance and SEO in their web projects. or Full-Stack Developers or Front-end Developers.

Enroll now: Next.JS : The beginner guide (2024 edition)

Summary

Title: Next.JS : The beginner guide (2024 edition)

Price: $19.99

Average Rating: 4.7

Number of Lectures: 86

Number of Published Lectures: 86

Number of Curriculum Items: 86

Number of Published Curriculum Objects: 86

Original Price: $84.99

Quality Status: approved

Status: Live

What You Will Learn

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

Who Should Attend

React Developers seeking to expand their skill set to include NextJS for improved performance and SEO in their web projects.

Full-Stack Developers

Front-end Developers

Target Audiences

React Developers seeking to expand their skill set to include NextJS for improved performance and SEO in their web projects.

Full-Stack Developers

Front-end Developers

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 yourcurrent 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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Requirement

Lecture 2: Next.JS

Lecture 3: A quick refresher about client/server

Lecture 4: Client side rendering

Lecture 5: Server side rendering

Chapter 2: Front end project – Flash news project

Lecture 1: Preview

Lecture 2: NodeJS & NPM version

Lecture 3: Create a Next.JS project

Lecture 4: App router folder and Page router folder

Lecture 5: Routing system

Lecture 6: The layout.tsx file

Lecture 7: Nav

Lecture 8: Nav items

Lecture 9: Static Site Generation (SSG)

Lecture 10: What about the link to the home page ?

Lecture 11: Navigation and params

Lecture 12: Client components

Lecture 13: Json server : important informations

Lecture 14: Setup API with json-server

Lecture 15: Server side data fetching

Lecture 16: Environment variables

Lecture 17: Cache and revalidations

Lecture 18: Card component

Lecture 19: Article list

Lecture 20: Image fallback

Lecture 21: Optimized fonts

Lecture 22: Metadata

Lecture 23: Articles by category

Lecture 24: Static generation for dynamics route segments

Lecture 25: Handle loading with loading.tsx

Lecture 26: Handle pages errors with error.tsx

Lecture 27: Fetching an article by title

Lecture 28: Displaying an article

Lecture 29: Page not found with not-found.tsx

Lecture 30: Templates with template.tsx

Lecture 31: Summarize Templates in 2 sentences

Lecture 32: Hydratation Missmatch

Lecture 33: Clock component

Lecture 34: Crytpo news api

Lecture 35: Crypto card

Lecture 36: Get rid of shiftings

Lecture 37: Data Streaming explained

Lecture 38: Streaming with Suspense

Lecture 39: A website with 100/100 Lighthouse score

Chapter 3: Full stack project – Code Snippet manager

Lecture 1: Project overview

Lecture 2: Project setup

Lecture 3: Understanding all the projects actors

Lecture 4: Header component

Lecture 5: Auth – Setup Clerk part 1

Lecture 6: Auth – What is a middleware / Setup Clerk part 2

Lecture 7: Auth – Custom auth pages

Lecture 8: Auth – Styling auth

Lecture 9: Auth – Account management and signout

Lecture 10: Database – Supabase database setup

Lecture 11: Database – Prisma and model setup

Lecture 12: Database – Accessing database using prisma

Lecture 13: API – CRUD overview

Lecture 14: API – Creating your first public API endpoint

Lecture 15: API – Body and URI params

Lecture 16: API – Query params

Lecture 17: API – Zod validation

Lecture 18: API – Auth protection

Lecture 19: Nav

Lecture 20: Searchbar and useRouter

Lecture 21: Card component

Lecture 22: Toast

Lecture 23: Snippet List

Lecture 24: Snippet list by technology

Lecture 25: Filtering the lists

Lecture 26: Fetch a unique snippet

Lecture 27: Synthax Highlighter component

Lecture 28: Actions buttons

Lecture 29: Delete dialog

Lecture 30: Delete : Fixing the refresh issue

Lecture 31: Lets summarize data fetching architecture

Lecture 32: Create form

Lecture 33: Hook form basics

Lecture 34: Hook form with zod

Lecture 35: Hook form validation : Create snippet form

Lecture 36: Submit a form

Lecture 37: Update a snippet

Chapter 4: Multiple languages with I18n – next-intl

Lecture 1: Setup next intl

Lecture 2: Translating texts

Lecture 3: Translating clerk components

Lecture 4: Language switcher

Chapter 5: Form actions

Lecture 1: Handling form on the server only

Instructors

Robin Lebhar
Full stack developer / Dev teacher in Engineer school

Rating Distribution

1 stars: 0 votes

2 stars: 1 votes

3 stars: 4 votes

4 stars: 3 votes

5 stars: 16 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!