Build Unofficial Udemy clone Application in Next.js v13

Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.

The new router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior.

When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time.

A Dynamic Segment can be created by wrapping a folder’s name in square brackets: [folderName]. For example, [id] or [slug].

Dynamic Segments are passed as the params prop to layout, page, route, and generateMetadata functions.

The hierarchy of the app folder maps directly to URL paths. However, it’s possible to break out of this pattern by creating a route group. Route groups can be used to:

• Organize routes without affecting the URL structure.

• Opting-in specific route segments into a layout.

• Create multiple root layouts by splitting your application.

A page is UI that is unique to a route. You can define pages by exporting a component from a page.js file. Use nested folders to define a route and a page.js file to make the route publicly accessible.

The Next.js router uses server-centric routing with client-side navigation. It supports instant loading states and concurrent rendering. This means navigation maintains client-side state, avoids expensive re-renders, is interruptible, and doesn't cause race conditions.

There are two ways to navigate between routes:

• <Link> Component

• useRouter Hook

This page will go through how to use <Link>, useRouter(), and dive deeper into how navigation works.

The useRouter hook allows you to programmatically change routes inside Client Components.

To use useRouter, import it from next/navigation, and call the hook inside your Client Component:

When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time.

Server and Client Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

This page will go through the differences between Server and Client Components and how to use them in your Next.js application.

• This new data fetching model is currently being developed by the React team. We recommend reading the support for promises React RFC which introduces async/await in Server Components and a new use() hook for Client Components.

• While you can try it out, it is not yet stable. We'll keep these docs updated to reflect the latest developments.

• API routes should still be defined in the pages/api/* directory and not moved to the app directory.

• Route Handlers are available on next@canary. This replaces API Routes from the pages directory.

• Some use cases where an API route was used to keep access tokens secure when calling an external API from the client can now be done directly in Server Components.

Next.js 13 introduced a new file convention, loading.js, to help you create meaningful Loading UI with React Suspense. With this convention, you can show an instant loading state from the server while the content of a route segment loads, the new content is automatically swapped in once rendering is complete.

To learn how Streaming works in React and Next.js, it's helpful to understand Server-Side Rendering (SSR) and its limitations.

With SSR, there's a series of steps that need to be completed before a user can see and interact with a page:

1. First, all data for a given page is fetched on the server.

2. The server then renders the HTML for the page.

3. The HTML, CSS, and JavaScript for the page are sent to the client.

4. A non-interactive user interface is shown using the generated HTML, and CSS.

5. Finally, React hydrates the user interface to make it interactive.

The error.js file convention allows you to gracefully handle runtime errors in nested routes.

• Automatically wrap a route segment and its nested children in a React Error Boundary.

• Create error UI tailored to specific segments using the file-system hierarchy to adjust granularity.

• Isolate errors to affected segments while keeping the rest of the app functional.

• Add functionality to attempt to recover from an error without a full page reload.

Create error UI by adding an error.js file inside a route segment and exporting a React component:

bal styles can be imported into any layout, page, or component inside the app directory.

Good to know: This is different from the pages directory, where you can only import global styles inside the _app.js file.

You will learn how to install Bootstrap in Next.js v13

In this video, you are going to install Next.js in your application. You will clone the repository from Github and run npm install

In this video, you are going to learn how to use Bootstrap with Next.js v13. You will install bootstrap and react bootstrap

React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.

As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation.

In this video, we are going to build the navbar using react bootstrap navbar component

You will add categories of courses on the home page. We will use Bootstrap Container, Row and Col component to build our home page

In this lesson, we are going to render all the courses against each category. We don’t have any course right now on the backend. We did not create backend yet. We will just render the dummy course against each category

Now our goal is to display the course title, description and the video. We are going to use vimeo for the video. You can place any vimeo video url or video id. I want you to create a new account at vimeo and upload a video. You need the id of your uploaded video.

Now our goal is to add what you will learn section in the course details page.

I will be using React ListGroupItem component to display the list of learning outcomes.

We have to use this LearningOutcomes component inside the course/[slug.tsx] file

Now we need to add course content section. I am going to use React Bootstrap Accordion component.

Now we need to add the Add to Cart button and price section in Coursedetails page. You need to update the second Col in the Row and add course pricing and button. I have also added the total number of students and course author.

In this video, we are going to add Prisma ORM inside our existing Next.js application

In this video, we are going to create a new course model in the schema file. You will learn how to use migrate command. I will also teach you how to define the route to fetch all courses

Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.

The following HTTP methods are supported: GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS.

We will think about what type of models we need. You learn about how to design the schema for your application

In this video, we are going to create Course model, Video model, Topic model, Section models in Prisma. You will learn how to migrate these models into tables

You will learn how to create the dynamic route on the based on slug

You will learn how to perform relational queries in Prisma

Learn how to use include during queries

A user can view all the courses on the topic. We need to create a backend API endpoint to fetch all the courses on the based on topic

You will learn how to fetch the data in next.js application by using fetch()

You will learn how to fetch the data in next.js application by using fetch()

You will learn how to fetch the data in next.js application by using fetch()

In this video, we are going to fix this issue

When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.

In this video, we are going to create a card component in react

We are going to add proptypes for our React components.