00:00:00 Hi there, and welcome to the ultimate Next.js course.

00:00:04 I'm so happy you joined the course, and I can't wait for you to start learning this amazing piece of technology.

00:00:12 Before we get started, please join the Discord community if you haven't already.

00:00:16 It's a special server only for determined developers who joined JSM Pro courses.

00:00:22 I'm sure you'll find other like-minded people who will push each other forward, help each other, and make sure they're making the most out of their time.

00:00:30 There's a link in the description of this lecture.

00:00:33 Now, let's talk about the course.

00:00:35 We'll use the best tech stack in the world.

00:00:38 This means the newest version of Next.js.

00:00:40 We'll use MongoDB as our database.

00:00:43 We'll style our applications with the best choice of writing CSS – Tailwind.

00:00:48 Now we have a lot more time than in our YouTube videos, so I'll explain every little detail.

00:00:54 Finally, we'll use TypeScript.

00:00:56 TypeScript is the industry choice these days, and this course is perfect for becoming familiar with it if you aren't already.

00:01:03 As far as our requirements go, you'll need to know the following.

00:01:07 Intermediate JavaScript, things like variables, operators, functions, arrays and array methods such as map, for each filter,

00:01:15 async await, ES6 arrow functions, let and cons, destructuring, template strings, spread and rest operators.

00:01:22 And also Beginner React, things like components, props, state, JSX, creating functional components and styling, conditional rendering,

00:01:32 mapping over lists, and React hooks such as useState and useEffect.

00:01:38 You don't need any Next.js knowledge.

00:01:41 And if you don't know the above, don't worry.

00:01:44 I'll provide you with the resources in the description to learn the fundamentals of JS and React in a few hours.

00:01:51 It will definitely be much harder than if you came in with previous knowledge and experience, but I'm sure you can do it if you're motivated enough.

00:02:00 We will commence our journey by addressing the why and then proceed to do the how every time we introduce something new.

00:02:07 At the very start of the course, we'll learn why we even felt the need for Next.js, followed by how the web works for different technologies,

00:02:16 such as React, Vanilla JavaScript, and finally Next.js.

00:02:21 Our initial focus will include setting up a Next.js project and exploring various setup methods.

00:02:28 utilizing tools like ESLint, Prettier, Git and GitHub effectively, integrating Tailwind CSS and ShadCN, and constructing a well-structured code architecture.

00:02:40 And afterward, we'll dive into the core concepts of Next.js, covering the fundamentals of Next.js, client versus server architecture,

00:02:49 runtime versus build time, rendering strategies like SSR, ISR, SSG, and CSR, and how to think and approach building applications in Next.

00:03:02 Then we're going to talk about routing, and that's going to include normal routes, dynamic routes, nested routes, route groups,

00:03:09 parallel routes, and even intercepting routes.

00:03:13 We're going to also cover different authentication methods such as email and password and social logins like Google and GitHub.

00:03:20 Authorization concepts including public and private routes will be covered too.

00:03:25 multiple layouts, optimizing fonts, enhancing SEO, using the context API within the new Next.js server architecture, data fetching for all rendering strategies,

00:03:37 revalidation and caching, building the backend, exploring the API routes and server actions, understanding different databases,

00:03:46 specifically MongoDB and advanced MongoDB features like aggregation pipelines, Mongoose, integration of OpenAI for AI automated answers,

00:03:57 and classic algorithms for building the recommendation system from scratch.

00:04:02 Global database search, batch system, reputation, interactive data listings, and I've gotten out of breath.

00:04:09 So let me take a pause.

00:04:11 Moving forward, we will continue our learning journey by covering developing responsive and complex user interfaces using Tailwind,

00:04:19 light and dark theme, exploring unique Tailwind properties and utility extensions, learning Figma as a developer, using ChatCN,

00:04:28 React Hook Form, Zod for validation, and everyone's favorite, TypeScript, covering types, interfaces, extends, and many other topics.

00:04:38 But our journey doesn't stop there.

00:04:40 We'll also explore the implementation of exciting features such as calculating page views, voting system, advanced filters,

00:04:48 specialized search mechanisms, pagination, third-party API integration, and markdown.

00:04:55 And most importantly, interactive lessons that provide insights into the mental model behind my approach to even the smallest aspects of website development,

00:05:05 presented in the form of helpful hints.

00:05:08 Now, let me show you what amazing app you'll build to learn Next.js.

00:05:13 Everything starts with our homepage.

00:05:16 Here, our users can choose between the light, dark, or the system mode.

00:05:21 And home is also the place where you can see all of the questions that people have been asking.

00:05:26 We have two sidebars, the one on the left for navigation and the one on the right for the custom recommendation system.

00:05:34 The application is fully mobile responsive, and we can sort our questions based on newest, frequent, unanswered, or by special recommendation algorithm,

00:05:43 which we'll implement from scratch.

00:05:45 Then we have an active, debounced, server-side rendered search.

00:05:50 And for more than 20 questions, there's going to be pagination happening right here at the bottom.

00:05:55 But this is just the start.

00:05:57 You can enter each one of these questions to be greeted with a full comprehensive page details page.

00:06:03 where you can render Markdown code with complete code blocks as well as tags.

00:06:08 You can also upvote or downvote each question or save it to your collection.

00:06:13 And just a bit below, we're greeted with a comprehensive answering system where you can see all of the answers also in Markdown,

00:06:21 which can be upvoted or downvoted with complete code blocks and the complete Markdown, what you see is what you get editor.

00:06:28 Answers are also paginated and there's a complete validation system put in place.

00:06:33 Not to mention that there's a special Generate AI Answer feature, but we'll explore that once we log in.

00:06:40 Next on the list, we have Community tab where you can see all of the different users.

00:06:45 You can search across those users and also filter them.

00:06:48 Then we have the Tags page, where you can see all of the most popular tags, search them or even filter them by popularity to see how many questions there

00:06:58 are with a related question.

00:07:00 There's a Tag Details page, so you can see all of the questions related to that tag.

00:07:05 There's also the Find Jobs page, where you can see live-fetched jobs from all of the most popular job APIs.

00:07:12 You can search through them and also filter them by location.

00:07:17 Now, there's also a whole subset of features that are hidden behind the login and the registration system.

00:07:23 So let's go ahead and login to explore them.

00:07:26 We have a custom login and registration page where we can log in using GitHub, Google, or just create a new account.

00:07:33 Once you're in, you can visit your profile.

00:07:36 And here, we have a comprehensive badging system, where as you answer questions or post questions, and as your questions get more upvotes,

00:07:45 you grow as a developer on our Dev Overflow platform.

00:07:49 You can also add your details, such as a link, location, when you joined, and a bio.

00:07:55 Finally, here, you can filter through all of your answers and top posts, as well as tags.

00:08:01 There's also a complete edit profile page.

00:08:04 Now, once you're logged in, you can also ask a question.

00:08:08 You can add a title, a question, and even insert a custom code block in any programming language you want.

00:08:17 Not to say you can add tags, such as TypeScript and Next.js, all with a comprehensive validation system and with immediate response.

00:08:28 But now, let's explore a really cool feature, the one that allows you to provide an AI-generated answer.

00:08:35 So you just click here, and the AI answer has been generated for you.

00:08:40 And of course, the goal of the app isn't for AI to provide the answers, but it can surely help you give a faster response.

00:08:48 And now that we're logged in, we can also add a question to our collection, after which you can revisit it later on in case you need it for reference.

00:08:58 Now, since we viewed a couple of questions, if you go back to the homepage and click recommended, also the top questions on the right side change as you

00:09:07 traverse the application because the algorithm learns more about the tags you follow and the questions you look at.

00:09:13 Now let's go to the light mode a bit to see how it looks like.

00:09:16 I also like it quite a lot.

00:09:18 And not to mention, there's a comprehensive global search system.

00:09:23 So you can search for something like next, and it's going to automatically give you top matches for questions as well as tags,

00:09:32 answers, and users.

00:09:34 And you can also filter them right here within the search.

00:09:38 So wherever you are on the page, for example, on tags, and you search for something, it's going to show you the questions,

00:09:45 the answers, tags, and even users if they are.

00:09:50 So let's search for something like JSM.

00:09:52 And immediately, it's going to show you all the questions, tags, answers, and users, whatever there might be regarding to your search query,

00:10:01 and you can quickly navigate to it.

00:10:04 Now, I think I don't even have to mention how responsive our app is.

00:10:09 Everything is working flawlessly.

00:10:11 We have a custom mobile sidebar, we have complete mobile views that feel like a native mobile application, and the question details page looks flawless

00:10:22 on mobile devices as well.

00:10:24 But even more than that, if we go to home and open up the lighthouse, This is going to test our performance, accessibility,

00:10:33 best practices, SEO, and progressive web app functionalities.

00:10:37 And if I click analyze page load, Google is going to analyze our website in depth.

00:10:43 And trust me, it is strict when providing you scores.

00:10:47 But as you can see, we got an unparalleled score for such a comprehensive and hard and data-intensive application.

00:10:56 The performance is a clear 100, with a 0.3 second first contentful paint, which means when you first see something, and then an astonishing 0.4 seconds

00:11:08 largest contentful paint.

00:11:11 Essentially means that the website loads before you blink.

00:11:15 The total blocking time is zero, and as you can see, the page loads instantaneously.

00:11:21 Not only that, the accessibility is a 97, best practices 92, and if you remove some console logs from the console, it's gonna get better,

00:11:30 and then SEO is a clear 100. I mean, to be honest, I'm amazed by these scores.

00:11:36 But it's not only the app, it's the Next.js 13.5 and further that allow us to extract all of the best practices out of it and make this possible.

00:11:47 So, that's our Dev Overflow for you.

00:11:49 I hope you're excited as I am.

00:11:52 And remember, the developer journey is a uniquely hard one compared to different professions.

00:11:58 Every day, we encounter bugs, errors, and new issues.

00:12:02 You might think these are failures, but in reality, they're just mini bosses to beat to get to the next level.

00:12:09 I know you've got this.

00:12:10 You can ask any questions you have in the Discord server.

00:12:13 You'll be helped by others, and you'll be able to help others too.

00:12:17 If you encounter any mistakes or want to provide feedback, there's a link at the bottom right corner of each lecture where you can do that.

00:12:25 So, with that said, let's dive right in.