• Search...

categories: Technology & Innovation

Data
Software
Technology
SDG 4: Quality Education
SDG 8: Decent Work and Economic Growth
SDG 9: Industry, Innovation and Infrastructure

Next.js & React - Build a Full Stack Application

Duration: 4 h 15 m / 33 lessons

Level: Specialized

Course Language: Arabic

By the end of this course, you will be able to

  • Define all the features of Next.js, you will learn how to fetch data from the server using Server-Side Data Fetching and Next.js concepts and how to enable, use, and optimize SSR.

  • Create client-based UI applications using React.js and full ReactJS applications using NextJS.

  • Deal with a database like MongoDB and create, query, and update data schemas and models.

Course Details

  • 4 h 15 m/33 lessons
  • Last updated: 17/12/2023
  • Course completion certificate

Course Content

Free lessons

1.

Welcome & Introduction

1 Minutes
2.

Requirements & Framework Vs Library

3 Minutes
3.

What Is Next.Js & Why Would You Use It?

3 Minutes
4.

Next.Js Features

3 Minutes
1.

Welcome & Introduction

1 Minutes
2.

Requirements & Framework Vs Library

3 Minutes
3.

What Is Next.Js & Why Would You Use It?

3 Minutes
4.

Next.Js Features

3 Minutes
5.

Creating A Nextjs Project

3 Minutes
6.

Analyzing The Created Project

8 Minutes
1.

Adding First Page

3 Minutes
2.

Adding A Named-Static Route File

5 Minutes
3.

Working With Nested Paths & Routes

3 Minutes
4.

Adding Dynamic Paths & Routes

6 Minutes
5.

A Different Way Of Setting Link Hrefs

8 Minutes
1.

Review Our Project

2 Minutes
2.

Explain Components Folder

19 Minutes
3.

Setting Up The Pages

15 Minutes
1.

Data Fetching Like In React Apps

5 Minutes
2.

The Problem With Traditional React Apps

4 Minutes
3.

How Nextjs Prepares & Pre-Renders Pages

8 Minutes
4.

Introducing Static Generation With Getstaticprops

10 Minutes
5.

Disadvantages Of Getstaticprops

8 Minutes
6.

Introducing Getstaticpaths For Dynamic Pages

6 Minutes
1.

What Is Database And Their Types?

8 Minutes
2.

Setting Up A Mongodb Database

6 Minutes
3.

Connect Mongodb To Our Project

8 Minutes
4.

Creating Database Schema

6 Minutes
5.

Creating Endpoints (Api Routes) & Running Mongodb Queries

11 Minutes
6.

Test Api Routes Using Postman

4 Minutes
7.

Remove Hard Code On Homepage & Getting Data From Api Route

9 Minutes
8.

Store Product Data Into Database Using ApI Route

16 Minutes
9.

Show Product details In Dynamic (Ssg Page)

14 Minutes
1.

Improve Seo & Analyzing The Need For Head Metadata

8 Minutes
2.

Optimizing Images With The Next Image

6 Minutes
1.

Next 13 Beta Version

2 Minutes
2.

Deploy Our Application On Vercel

21 Minutes

About this course

In the age of modern technology, web applications are always evolving. With Next.js and React, you'll be able to build advanced, easy-to-scalable, high-performance web applications. You will also learn how to take advantage of Next.js features such as partial loading, server-side compilation, and many more tools and libraries that make building and development easier for you. It is worth noting that NextJS is a great option to grow as a React developer and take your React applications to the next level. Join us now!

Course requirements and prerequisites

Modern Javascript (ES 6) and ReactJS knowledge is recommended, but this course includes a complete review of React

Mentor

Looking for help?