The Ultimate Next.js 14+ Crash course Master Web Development

Focused View

Mohamed Hajji

6:53:31

68 View

1 - Course trailer

1 - Trailer.mp4

00:58

2 - Introduction

2 - Introduction Overview.mp4

01:32

3 - What is Next js.mp4

02:01

4 - Apps built with Next js.mp4

02:43

3 - Getting started

5 - Create Next js project Automatic installation.mp4

08:02

6 - Create Next js project Manuall Installation.mp4

06:18

7 - Nextjs Project Structure.mp4

09:18

4 - Routing

8 - Routing fundamentals defining routes nested routes.mp4

07:11

9 - Layouts.mp4

07:24

10 - Link component.mp4

03:04

11 - Templates.mp4

08:09

12 - Metadata.mp4

04:28

13 - usePathname.mp4

04:26

14 - navigation scroll behavior and scroll to id.mp4

06:36

15 - useRouter Hook and history api.mp4

11:49

16 - useSearchParams.mp4

04:15

17 - Route Groups and layout groupes.mp4

09:03

18 - Creating multiple root layouts.mp4

09:12

5 - Styling

19 - Global css.mp4

05:30

20 - Css modules.mp4

04:36

21 - Sass.mp4

06:33

22 - Css in js styles without framework.mp4

03:45

23 - Tailwind css.mp4

05:36

24 - Chadcn ui.mp4

12:19

6 - Typescript and next js

25 - why using typescript.mp4

12:07

26 - Recreating our project with typescript.mp4

04:36

27 - Create a next js component with typescript and props interface.mp4

05:55

7 - Routing Advanced

28 - Dynamic routes fundamentals.mp4

05:29

29 - Dynamic routes real world example.mp4

05:51

30 - Generating Static Params.mp4

05:31

31 - Catchall Segments and Optional Catchall Segments.mp4

04:22

32 - Loading ui with fetch example.mp4

07:57

33 - Streaming theory.mp4

10:51

34 - Error handling errorjs.mp4

03:42

8 - Font Image Script Optimizations

35 - Use google fonts in your next js 14 application.mp4

06:00

36 - Use google font as variables with tailwind css.mp4

03:50

37 - Script optimization.mp4

09:34

38 - Image optimization part 1.mp4

07:22

9 - Rendering

39 - Client components.mp4

04:27

40 - Server Components Fundamentals and benefits.mp4

06:32

41 - How are Server Components rendered.mp4

05:48

42 - Dynamic Rendering.html

43 - Dynamic Functions.html

44 - When to use Server and Client Components.mp4

03:35

45 - Static Rendering Default.html

46 - Edge and Nodejs Runtimes.html

10 - Data Fetching Caching and Revalidating

47 - Fetching Data on the Server with fetch cache timebased revalidation.mp4

08:44

48 - Fetching data on the client with axios.mp4

03:18

11 - Parallel routes

49 - Parallel routing Fundemntals.mp4

07:01

50 - Independent loading test for parallel routes.mp4

03:21

12 - Intercepting Routes building an app with advanced parallel intercepting routes

51 - Understanding the concept of Intercepting Routes.mp4

06:42

52 - Building our app 1 home page.mp4

06:03

53 - Building our app 2 Photo page.mp4

07:50

54 - Building our app 3 parallel route modal and intercepting photo route.mp4

08:04

55 - Building our app 4 click outside dismiss and key event listener.mp4

07:35

13 - Route handlers cookies headers

56 - Route handlers fundamentals request response fetch caching.mp4

08:25

57 - Simple quote generator app with route handlers.mp4

08:20

58 - Cookies.mp4

07:03

59 - Headers.mp4

04:06

60 - Redirects.mp4

01:28

61 - Dynamic Route Segments.mp4

03:52

62 - URL Query Parameters.mp4

02:16

63 - Request Body and using thunder client to test our route handler.mp4

03:59

64 - Sending FormData from next js client and retrieve it in route handler.mp4

10:05

65 - Create open ai chat with route handlers and streaming.html

66 - CORS.mp4

03:40

67 - NonUI Responses.mp4

01:38

14 - Middleware NextRequest and NextResponse apis

68 - Middleware fundamentals with example.mp4

05:35

69 - Matcher.mp4

03:18

70 - Conditional Statements.mp4

03:23

71 - Rewrite vs Redirect.mp4

01:58

72 - Using Cookies.mp4

07:52

73 - Setting Headers.mp4

03:46

74 - Producing a Response.mp4

05:18

15 - Internationalization application with multiple languages made easy

75 - App setup with i18n config and dictionaries.mp4

10:34

Description

Unlock Next.js 14 Secrets: Excel in Building Fast, SEO-Friendly Web Applications!

What You'll Learn?

Learn foundational skills in Next js 14+ to create scalable projects
Grasp core Next js 14+ concepts for building dynamic web applications
Develop robust web applications utilizing Next js 14+ framework
Utilize Next js 14+ latest features to streamline front-end development workflows
Discover advanced, often overlooked Next js14+ techniques and concepts

Who is this for?

Front-end developers eager to expand their skill set with the latest in web development

React developers looking to leverage Next js for improved performance and SEO

Full-stack developers seeking to streamline their workflow with server-side rendering

Individuals keen on staying current with web development by learning the cutting-edge features of Next js 14

Hobbyist coders and tech enthusiasts interested in mastering modern web frameworks

What You Need to Know?

Basic knowledge of HTML, CSS, and JavaScript

Familiarity with React fundamentals

A text editor or IDE (like VSCode) for coding

More details

Description
Dive into the world of modern web development with "The Ultimate Next.js 14+ Crash Course: Master Web Development," a comprehensive guide designed to transform you into a Next.js expert. Whether you're a seasoned developer or a curious novice, this course empowers you to harness the full potential of Next.js 14, the latest iteration of the acclaimed React framework.

Throughout this course, you'll embark on a hands-on journey, starting with the foundational principles of Next.js. You'll explore its robust capabilities, and the embrace of a hybrid framework model that allows for both client and server-side execution.

With a focus on practical learning, you'll learn to build scalable and maintainable web applications, implementing features such as API routes for building a versatile backend, and advanced routing techniques to create interactive and complex projects. The course pays special attention to the newest additions in Next.js 14 â€“ you'll master new image optimization techniques, middleware enhancements, and much more, ensuring that your skills are up-to-date with industry standards.

However, what sets this course apart is our focus on the new and groundbreaking features of Next.js 14. As you progress, you'll learn about the latest enhancements such as the Rust-based compiler for lightning-fast builds, enhanced Edge APIs for edge functions, and more, which significantly improve both developer experience and application performance.
To add unique value, the course also uncovers those advanced topics and insider techniques that are commonly skipped over. This is your chance to gain a competitive edge by mastering the nuanced aspects of Next.js that will make your web applications stand out.

By the end of this course, not only will you have built several fully functional Next.js projects to showcase your new skills, but you'll also have the confidence to tackle complex web development challenges and the knowledge to make informed decisions when architecting your own web applications.

Join us for "The Ultimate Next.js 14+ Crash Course: Master Web Development", and become part of the elite circle of developers who are pushing the boundaries of what's possible on the web. Whether you aim to improve your job prospects, contribute to exciting projects, or simply elevate your coding craft, this course is your gateway to success in the ever-evolving landscape of web technology.
Who this course is for:
Front-end developers eager to expand their skill set with the latest in web development
React developers looking to leverage Next js for improved performance and SEO
Full-stack developers seeking to streamline their workflow with server-side rendering
Individuals keen on staying current with web development by learning the cutting-edge features of Next js 14
Hobbyist coders and tech enthusiasts interested in mastering modern web frameworks

User Reviews

Rating

average 0

Total votes0

Focused display

Hello there ?My name is Mohamed HAJJI, i am a full stack web developer and a good one of course, i have great knowledge in the web development field in both frontend and backend ,i have built countless applications using many different technologies, and my job here is to take everything i know and try and share it with all my fellow developers from all levels especially for new developers because i have been there and i know the struggle of trying to learn and adapt to all the technologies we have nowadays and i will try in my new journey as an instructor to have different courses to build different major projects using different technologies.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.