Next.js | Master Modern Web Development From Scratch

In this lesson, we will explain what the files and folders we have to use in Next.js are for.

Is Next.js better than React?

Next.js is definitely newer and faster in many cases when compared with React. JAMstack a modern web development architecture that uses JavaScript, APIs, and pre-rendered Markup, Next.js is the best choice for them.

In this lesson we will create new pages. We will learn how to navigate between these pages we have created. While doing this, we will learn the Link component in Next.js.

Is Next.js a coding language?

Next.js is an open-source full-fledged framework created by Vercel, designed to simplify building interactive web applications using React. It offers features for both server-side rendering (SSR) and static site generation (SSG), enabling you to create performant and SEO-friendly web experiences.

In this lesson, we will learn how to create and use components that we don't want to route with Next.js.

Is Next.js also a backend?

Next.js backend capabilities are often overshadowed by its frontend features, but it’s equally competent in handling server-side logic.

In this lesson, we will learn how to create dynamic routes with you. This structure is one of the most distinctive features that distinguish Next.js from React.

How Does Next.js Work?

Next.js operates by enabling both server-side rendering (SSR) and static site generation (SSG), allowing developers to choose the best rendering method for their application’s needs. SSR generates HTML on the server for each request, while SSG pre-renders HTML at build time. Both methods improve performance and SEO by ensuring fast, optimized content delivery.

In this lesson, we will introduce the application we will develop in the section. We will learn the basics of Next.js on this application.

Is Next.js a Framework or Library?

Next.js is considered a framework because it provides a structured way of building applications, offering both client-side and server-side functionalities.

In this lesson, we will start to create the application we explained in the last lesson. In our lesson, we will create the routes that will take place in our application.

What is Server-Side Rendering (SSR) in Next.js?

Server-Side Rendering (SSR) is a feature in Next.js that allows you to pre-render pages on the server at request time, providing better performance and SEO compared to traditional client-side rendering.

In this lesson, we will learn how to create page layout in Next.js applications. We use the layout.js file to create this.

How do I create a new Next.js project?

Use npx create-next-app followed by your project name to initialize a new Next.js project.

In this lesson, we will learn how to use module.css in our application. We will also examine other features of the Image component.

How does Next.js compare to other frameworks?

Comparing Next.js to other frameworks, its unique value proposition becomes more clear. Unlike traditional React applications that require additional configurations for tooling and functionalities, Next.js comes out of the box with features like server-side rendering and static site generation.

In this lesson, we will start creating our homepage. This page will feature a slide containing the content of the courses we offer.

What are the most common use cases for Next.js?

Next.js is a versatile framework, capable of addressing diverse web development needs across multiple industries. One of its popular applications is in the realm of e-commerce. With its fast rendering and robust SEO capabilities, it offers an optimal solution for businesses looking to create high-performance online stores that rank well on search engines.

In this lesson, we will discuss component types in Next.js. So, what do we mean by this? Components are created in two different places. One is on the client side, meaning "client-side rendering," and the other is on the server side.

What is Next.js?

Next.js is a front-end framework that builds on the capabilities of React, a versatile JavaScript library used for crafting engaging user interfaces. What sets Next.js apart is its ability to simplify complex aspects of web development by providing a comprehensive suite of tools and features.

In this lesson, we will build a structure that will help us understand which page we are on. To do this, we will give some style operations to Link components.

What are the benefits of using Next JS?

Next.js is a popular React framework that brings several benefits to web development. Here are some of the key advantages of using Next.js:

• Server-Side Rendering (SSR):

  • Next.js supports server-side rendering out of the box. This means that pages can be rendered on the server and then sent to the client, providing better performance and SEO as search engines can crawl the fully rendered content.

• Static Site Generation (SSG):

  • Next.js allows for static site generation, where pages can be pre-built at build time. This can significantly improve performance by serving static files directly from a CDN, reducing the load on servers and improving the user experience.

• Automatic Code Splitting:

  • Next.js automatically splits the code into smaller chunks, allowing for efficient loading of only the necessary code for a particular page. This results in faster initial page loads and improved overall performance.

• Built-in CSS Support:

  • Next.js provides built-in support for styling solutions, including CSS modules, styled-jsx, and support for CSS-in-JS libraries. This allows developers to choose their preferred styling approach without the need for additional configuration.

• API Routes:

  • Next.js allows you to create API routes easily, enabling the development of serverless functions. This can be useful for handling backend logic without the need for a separate server.

In this lesson, we will perform data extraction from an API source to create the ‘Teacher’ page.

How does Next JS handle client-side navigation?

Next.js uses a client-side navigation approach that leverages the HTML5 History API. This enables smooth transitions between pages on the client side without a full page reload. The framework provides a built-in Link component that facilitates client-side navigation, and it supports both traditional anchor (<a>) tags and programmatically navigating through the next/router module.

We will try to make the component named TeacherPage, which we created in the last lesson, a component compiled on the server again. To do this, we will create the area where we use dynamic data in a separate component.

Explain the concept of dynamic routing in Next JS:

Dynamic routing in Next.js refers to the ability to create routes for pages with dynamic parameters, allowing you to build pages that can handle different data or content based on the values of these parameters. Instead of creating a separate page for each variation, you can use a single page template and dynamically generate content based on the provided parameters.

In this lesson, we will create a message that will appear on the screen until the application pages are loaded. You have done this many times with React.

What is meant by Styled JSX in Next JS?

We employ the Styled JSX CSS-in-JS library to create encapsulated and scoped styles for styling Next JS components. This ensures that the styles introduced to a component have no impact on other components, enabling seamless addition, modification, and removal of styles without affecting unrelated parts of the application.

In this lesson, we will learn how to create an Error page in Next.js applications.

Is Next JS backend, frontend, or full-stack?

Next JS is considered a full-stack framework, offering the capability to render content on both the client-side and server-side. This feature is particularly valuable in the context of React, as React by itself primarily focuses on frontend development without built-in server-side rendering capabilities.

In this lesson, we will learn how to create a not found page. There is a not found page that Next.js automatically displays when trying to navigate to pages that are not actually there. In this tutorial we will learn how to customise this page.

In this lesson, we will create the TeacherDetail component, which contains detailed information about teachers. We will use dynamic routes to create it.

In this lesson, we will create the Share page. This page will include a form area. We will learn how to use form tags with Next.js. In fact, many features are the same as in React.

In this lesson, we will add the section where we can choose an image inside the form field.

In this lesson, we will run the form using the action property of the form tag.

In this tutorial we will learn how to optimise Next.js applications using the useFormStatus hook. Actually this hook belongs to React, but it only works when Next.js is used.

In this lesson we will do some work with input tags. Then we will learn the useFormState hook.

in this lesson we will show alternative error handling.

In this lesson, we will learn how to use metadata in more detail. In Next.js, metadata is used to define metadata at the page or application level. This metadata helps browsers and search engines to better understand and optimise your page. It is also used to determine how you will appear on social media platforms and in search results.

This lesson will be the last lesson in this section. In this lesson, we will remember again what we have learnt in this section

In this lesson, we will explain the topics we will learn in this chapter.

In this lesson, we will introduce the application we will develop in the department.

In this lesson, we will start application installation. I collect applications in a folder named Next.js.

In this lesson, we will start creating our pages with fake data.

In this lesson we will create notFound pages

The previous lessons passed in the form of a general repetition of the previous chapter. With this lesson, we will start to learn features that we have not seen before. In this lesson we will learn how to create parallel routes. With this feature, we will be able to create multiple pages within a page. These pages will be completely independent of each other.

In this lesson we will learn how to create pages using dynamic and parallel routes. We will explain how these will work together. In this lesson, we will explain a structure that is used quite often in today's websites.

This lesson will be very simple and simple. In this lesson, we will display the film data we have obtained in a card structure. We will use this card structure on all the pages we need.

In this lesson, we will use the ‘catch all routes’ feature in the application. So what was this? Catch All Routes in Next.js is a feature used to create dynamic routes.

In this lesson, we will start creating dynamic pages that we use in parallel routes.

. In this lesson, we will create an error component to manage the problems we will encounter in dynamic routes. Then we will make some updates in the main-header component.

In this lesson, we will learn how to programmatically navigate pages using the useRouter hook.

In this lesson, we will learn how to create a Route Group, so what is it? Route Groups in Next.js are a feature used to organize your file structure and allow you to separate pages into logical groups without changing the URL structure. This feature is especially used in the App Directory and App Router structure introduced with Next.js 13. A Route Group helps you create a folder hierarchy in your application and bring together the files in this folder

In this lesson, we will show a usage that Next.js recommends to us. This is a method that we will use when we make HTTP requests from backend services. We will not be able to fully activate this section in this lesson because we are not working with a backend service. But I want you to know that there is such a structure.

In this lesson, we will learn what Middlaware is and how to use it in Next.js.

In this deck, we will explain what we will do in the episode.

In this tutorial, we will perform data fetching operations that you are used to from normal React applications. In Next.js, we call these operations client-side data fetching.

In this lesson, we will optimize the structure we created in the last lesson. Why will we do this? We will do this so that our components have a simpler and more controllable structure.

In this lesson, we will do server-side data fetching with Next.js components. In our previous lesson, we worked on how data is retrieved in a normal React application. But there are more efficient data fetching methods that we can use with Next.js. This is a method that we need to use to increase the performance of the code.

We will edit the data fetching process that you created in the last lesson. We will create a loading component for the data fetching process

In this lesson, we will fill the movie detail page with data from TMDB API.

We continue to get the movie data in our application from the TMDB API source. In this lesson, we will create the “my favorite” page.

In this lesson, we will start to pull data from the TMDB API on the pages where we use the Catch All Routes structure.

In this lesson, we will learn the suspense component that we can use in next.js. So what is it? Suspense in Next.js is a feature that React offers for loading data and providing a more fluid experience to the user.

In this lesson, we will add authentication feature to applications with Firebase. So what is Firebase? Firebase is an application development platform developed and offered by Google.

In this lesson, we will start making firebase integration for Next.js application.

. In this lesson we will create the sign-up page.

. In this lesson we will create the sign-in page.

. In this lesson we will create the logout page.

In this part of our course, we will learn to use the Pages Router system, the old routing system of Next.js

In this lesson, we will start an application using Pages Router.

In this lesson, we will learn how to create nested route and dynamic route structures with Pages Router.

In this lesson, we will create nested routes dynamically.

In this lesson, we will learn how to use the cath all routes and link features with Pages Router. Actually, it is not very different from App Router.

In this lesson, we will navigate between pages by performing programmatic navigation.

In this lesson, we will create a not-found page.

In this section we will explain what we will learn

In this lesson we will try to learn how to compile components. Components created using these methods are created on the server. But the way they are created is different. In this lesson we will learn the differences between static rendering and server side rendering.

In this lesson we will learn how to use the getStaticProps function.

In this lesson, we will create a file with fake data. We will use the data in this file in the components. While doing this, we will use the "file system" which is available by default in node.js.

In this lesson, we will learn how to use the Incremental Static Regeneration feature in the Pages Router structure. This is the name given in the official documentation page. The logic used to create this feature is called Incremental Static Generation.

In this lesson, we will learn two new properties that I can use in getStaticProps. These are notFound and redirect.

In this lesson, we will learn how to create components on the server using dynamic data with Pages Router. Things get a little complicated here. We will learn how to manage this situation in our lesson.

In this tutorial we will learn how to manage dynamic pages using the getStaticPaths function.

In this lesson, we will learn how to use the fallback property and the notFound property when we try to go to a route that does not exist.

In this lesson, we will learn the getServerSideProps function.

In this lesson, we will learn how to create a dynamic page with getServerSideProps.

Until this lesson, we have created server components and tried to build dynamic structures in these components. But in some cases we also need client components. Now let's learn how to manage these processes.

In this lesson, we will extract data from the Next.js Pages Router structure. While doing this, we will convert the component into a client component. We will create the data using the realtime-database feature in firebase.

In this section we will introduce the application we will develop.

In this lesson, we will start creating our application. First, we will create our pages and fake data that we will use.

In this lesson, we will start creating routes where we will display tour routes.

In the last lesson, we created our components. We performed data transfer via Props. Now we will start using this structure we have created.

In this lesson, we will create a link component that we can use throughout the application. We will use this component wherever we want. Then we will start creating the detail page.

In this lesson, we will create the detail page. This tutorial will be more like a React tutorial than a Next.js tutorial.

In this lesson, we will create the layout of the application. By doing this, we will also create a header section that is visible on all pages of the application.

In this lesson, we will create the page where we will use all the tours. Then we will start the filtering section.In this lesson, we will work on the index.js file in the tour folder.

In this lesson, we will start creating the operations that will occur when the form is triggered.

In the last lesson, we created the tour filtering section. With the data we obtained in this section, we will create the Filtered Tour Page page. We will manage in case of errors in this page.

In this lesson, we will display the travel routes that have passed the filtering process.

In this lesson, we will use Firebase's real-time database feature to add a real database to our application.

In this lesson, we will recreate the Home page using static side generation.

In this tutorial we will create the page where tour details are shown.

In the last lessons, we did data fetching over firebase in both components. In this lesson we will try to optimise these operations.

In this lesson we will create the component where we show all the travel routes. There was also a filtering section in this component.

This will be our last lesson in the course. In this lesson, we will examine the operations we do in this section.

What is Next.js?

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.