Zero to Hero NextJS 14 course for real project development

Focused View

Ranjan Pandey

4:31:51

26 View

1. Introduction & Installation

1. Software Installation.mp4

01:31

2. What is NextJS and How its different then ReactJS.mp4

02:59

3. Creating and Running the Next App.mp4

05:35

4. Understanding the folder structure of the next app.mp4

03:37

5. Adding Bootstrap to the next app.mp4

03:01

2. Understanding NextJS 14.0 and its concepts

1. Understanding the flow of Next App.mp4

04:21

2. How Routing works in NextJS.mp4

02:05

3. File Based Routing in NextJS.mp4

04:55

4. Using Different Fonts in NextJS.mp4

11:00

5. Creating reusable Components in NextJS.mp4

03:01

6. Server side rendering VS Client side rendering.mp4

09:34

7. use client VS use server.mp4

03:48

3. Project Development with NextJS 14 & Bootstrap 5

1. Developing Navbar - Part-1.mp4

02:28

2. Developing Navbar - Part-2.mp4

02:10

3. Navbar Navigation using Link tag in NextJS.mp4

09:12

4. Styling Hero Section - Part-1.mp4

05:46

5. Page specific css file and its usage.mp4

04:21

6. Using Images in Next JS.mp4

03:57

7. Designing the Footer section.mp4

04:36

8. Using Icons in Next JS.mp4

03:36

9. Animations in NextJS - Part-1.mp4

01:31

10. Animations in NextJS - Part-2.mp4

04:20

11. Blog Page designing Card.mp4

06:03

12. Blog Page Make Server Side API call.mp4

04:55

13. Rendering the API data on to the Card component.mp4

08:16

14. Displaying Remote Server Image in NextJS app.mp4

03:49

15. Styling the Card component.mp4

04:03

4. Caching and Different Templates in NextJS

1. Caching data in NextJS.mp4

07:50

2. Loading Template in NextJS.mp4

03:26

3. Layout Template for specific pages in NextJS.mp4

03:06

4. Error Template in NextJS.mp4

03:02

5. Dynamic Routing and Passing Data between Components in NextJS

1. Dynamic and Nested Routing in NextJS.mp4

04:33

2. Dynamic Routing on the Blog Detail page.mp4

05:07

3. Passing data between page in NextJS.mp4

03:31

4. Fetching Blog Detail data from API server side.mp4

04:27

5. Styling and Displaying data on Blog Detail page.mp4

04:45

6. Not Found Template in NextJS.mp4

02:22

7. Navigating from one page to another through Javascript.mp4

09:17

8. Passing data through query params.mp4

03:12

6. Client and Server side Components, Using both together

1. When to Use Server and Client side components.mp4

06:28

2. Example of Using Client and Server components together.mp4

03:02

3. Designing Product Page.mp4

02:13

4. Making API call From Client Component.mp4

04:13

5. Displaying Product List on Client Component.mp4

03:54

6. Fetching data in Server Component and Rendering server side.mp4

08:22

7. Using client and server component together - part-1.mp4

06:07

7. Developing REST API in NEXT JS

1. Understanding the working of NextJS REST API.mp4

03:03

2. Creating the NextJS application with Create Next App.mp4

02:18

3. Next JS Working and Folder structure.mp4

03:35

4. Developing our First REST API.mp4

04:09

5. GET API to fetch all Users from Remote microservice.mp4

03:27

6. Integrating Frontend and Backend REST API to show all Users on Page fetched.mp4

11:48

7. POST API to create new User - Part-1.mp4

07:55

8. POST API to create new User by making Remote microservice call - Part-2.mp4

04:57

9. PUT API passing dynamic params and request.mp4

06:23

10. Doing Validation for Request Data in backend API.mp4

02:46

11. PUT API to update a User by making Remote microservice call.mp4

02:35

12. DELETE API to delete a user by calling remote microservice.mp4

03:14

13. GET API to fetch Details of one user.mp4

02:14

Description

Learn NextJS 14 and Bootstrap 5 with practical examples after this course you will be ready to build real world projects

What You'll Learn?

You will learn to create new next js 14.0 application
You will learn to use Bootstrap5 and next js 14.0 together
You will learn about working of Next js app
You will learn about app router in Next JS
You will learn how to apply animation
You will learn when to use Server component and when to use Client component
You will learn how to use Client component and Server components together
You will learn to develop REST API's in Next JS
You will also learn to consume REST API in your NEXT JS project
You will also learn to make calls to other microservices.

Who is this for?

Anyone who wants to develop fullstack applications with NextJS 14.0

What You Need to Know?

Basics of HTML , CSS, ReactJS

More details

Description
In this course you will learn NextJS 14 along with Bootstrap5. You will learn different NextJS concepts like routing, API development, making calls to other microservices, Client side rendering, Server side rendering, combining client side and server side components. You will also learn various techniques of passing data between components and how to use bootstrap and animation. After this course you will ready to work in NextJS 14 in any company and also build any real world project.
REACT JS & NEXT JS are hot in the Job Market - Easily get Job or Upgrade your salary by switching to new Job
Following are the topics you will learn in this course:
What is NextJS
NextJS Vs ReactJS
Creating NextApp understanding its working
Adding Fonts, Icons, Bootstrap, Animations
Client side Vs Server side rendering
Different types of Templates & Layouts in Next JS
Routing - File based & Dynamic
Passing data between pages
Best way of using client and server components together in real time situation
Making REST API calls from UI and showing on response data on UI
Developing REST APIâ€™s like GET POST PUT DELETE
Validation of DATA
Calling other API from our Backend API - Microservice
Understanding about NoSQL, MongoDB and Mongoose
Integrating MongoDB to our Next App
Updating our REST API to connect to Database and store data using Mongoose.
Complete Handson
Project based
Source code provided
Step by Step explanation of concepts with handson practical examples.

Next.js is a powerful and popular open-source React framework that enables developers to build modern and efficient web applications. Launched by Vercel, Next.js simplifies the React development process by providing a robust structure and a range of built-in features.
One of Next.js' key strengths is its support for server-side rendering (SSR) and static site generation (SSG). This means that web pages can be pre-rendered on the server, enhancing performance and search engine optimization. Additionally, Next.js supports client-side rendering, offering flexibility in choosing the rendering method that best suits a project's needs.
The framework's automatic code splitting allows for optimized loading times, ensuring that only the necessary code is sent to the client. With a strong focus on developer experience, Next.js provides a wealth of features, including hot module replacement, automatic routing, and a plugin system for extensibility.
Next.js is a feature-rich React framework that simplifies the development of web applications. Some of its key features include:
Server-Side Rendering (SSR): Next.js enables SSR, allowing web pages to be pre-rendered on the server before being sent to the client. This enhances performance and improves search engine optimization.
Static Site Generation (SSG): In addition to SSR, Next.js supports SSG, where pages can be generated at build time. This approach is useful for content that doesn't change frequently, resulting in faster page loads.
Automatic Code Splitting: Next.js automatically splits code into smaller chunks, sending only the necessary code to the client. This leads to improved loading times and a better user experience, especially on slower networks.
Client-Side Rendering (CSR): While SSR and SSG are emphasized, Next.js also supports traditional client-side rendering when needed, offering flexibility in choosing the rendering approach based on specific use cases.
Routing: Next.js has automatic route handling based on the file system, making it intuitive for developers. Custom routes can also be configured easily, allowing for more complex application structures.
API Routes: Next.js simplifies the creation of API endpoints by providing a straightforward way to build serverless functions within the project. This facilitates seamless communication between the client and server.
Hot Module Replacement (HMR): Developers benefit from HMR, which allows for real-time code updates without requiring a full page refresh. This feature speeds up the development process and enhances the developer experience.
Middleware Support: Next.js supports middleware, allowing developers to execute custom logic before handling a request. This is particularly useful for tasks like authentication and data fetching.
Built-in CSS Support: Next.js provides built-in support for styling with CSS, whether it's traditional CSS, CSS Modules, or popular CSS-in-JS solutions like styled-components.
TypeScript Support: Next.js seamlessly integrates with TypeScript, providing static typing for enhanced code quality and developer productivity.
Who this course is for:
Anyone who wants to develop fullstack applications with NextJS 14.0

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

Ranjan Pandey

Instructor's Courses

I am a Fullstack DevOps software professional with 12+ years of experience in variety of technologies ranging from web and mobile app development using HTML5, CSS3, JavaScript, JQuery, Bootstrap, Angular, React, Java, Spring, Springboot, Python, Flask, Django, NodeJS, Express, Android, Ionic, React Native, Flutter, Camunda Bpm to Artificial Intelligence and Cloud technologies like Amazon web services and Microsoft Azure.I am also certified in Java, Azure cloud, Backbase product.I have experience in working with multiple MNC's and European clients. I am also a corporate trainer providing a wide range of training.

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.