Next.js 13 Crash Course For Beginners [2023]
Learn Next JS basics and build full stack apps with the Next JS framework!

What you will learn

Learn how to build client-side and full stack React JS apps with Next JS

Learn all key Next JS features like pre-rendering, SSR, data fetching, file-based routing.

Build real projects and apply what you learned

Learn server and client components

Description

This course will take you from Next JS beginner to advanced level in no time!

We’ll start at the very basics, no Next JS knowledge is required at all, and we’ll then dive into all the core features that make up Next JS where all concepts will be applied step-by-step.

For this course, you’ll need basic React knowledge.

In detail, this course will cover:


Get Instant Notification of New Courses on our Telegram channel.


  • What is NextJS? And why would you use it?
  • Creating NextJS projects from the ground up & understanding folder structure
  • Working with file-based routing
  • Adding dynamic routes
  • Navigate between pages using Next/Link and Next/Router
  • Implementing different forms of page pre-rendering and server-side rendering
  • Working with data and adding data fetching + pre-fetching to your apps
  • Pre-generating dynamic and static pages
  • API routes and fetch data from API routes
  • Build fullstack blog app using mongodb and next.js 13

What should you know before taking this course?

You should know JavaScript basics and modern JavaScript features like arrow functions, restructuring, the spread operator

You should also know the basics of React.

Who this course is for:

  • Programmers who want to learn the most in demand skill of a web developer
  • Developers that want to be in the top of Next JS Developers
  • React/Web developers who want to build static or hybrid (static + SSR) web apps with NextΒ·js
English
language

Content

Introduction

Introduction
Creating a Next.js 13 project and folder structure

Routing

Server and Client components
Concept of Page.js file and Nested routes
Dynamic routes
Navigate using Link component
Navigate using useRouter hook

Data Fetching

Fetching data in server components
Fetching data in dynamic routes
Concept of caching , revalidating and fetching data in Client components

Course Project: Blog App

Introduction
Implementing Add blog page and mongoDB setup
Creating Model and add blog post API route
Implementing blog list page and get blog list API route
Implementing delete blog functionality and delete API route
Implementing blog details page and details API route