00:00:00 Next.js, a flexible React framework.
00:00:04 But what does that mean?
00:00:06 In software development, a framework serves as a tool equipped with predefined rules and conventions that offer a structured approach to constructing an application.
00:00:19 It provides an environment that outlines the overall architecture, design patterns and workflows, allowing developers to focus on implementing specific
00:00:31 application logic rather than dealing with low-level design.
00:00:35 Simply put, a framework provides pre-built solutions for common functionalities such as integrating databases, managing routing,
00:00:44 handling authentication, and more.
00:00:47 So what sets Next.js apart from React.js?
00:00:51 Well, Next.js introduces plenty of features and capabilities that we will dive into in the upcoming lectures in detail.
00:01:00 But what you need to understand is that Next.js is essentially an extension of React, incorporating pre-built solutions,
00:01:09 ready to use features, and some additional functionalities on top of that.
00:01:14 In other words, Next.js is built on top of React, expanding its capabilities.
00:01:21 So if you're already a React.js developer, the Next.js journey will be silky smooth.
00:01:28 If you don't know React.js, you should familiarize yourself with some of the main foundations of React.
00:01:35 For example, how to create a component, do state management, how to structure your code, and how to handle the file and folder structure.
00:01:44 To help you learn that faster, At JavaScript Mastery, we have created a crash course on React that covers all the important things and includes a project
00:01:55 for you to practice and test what you've learned.
00:01:57 You can check it out for free on YouTube.
00:02:01 But why should you use a React framework or Next.js?
00:02:05 Well, React is constantly evolving and revolutionizing the way websites are built.
00:02:11 It completely transforms your approach to designing and developing applications.
00:02:17 It begins by encouraging you to think about components, breaking down the user interface into smaller pieces of code.
00:02:25 You describe states to introduce interactivity and establish connections between these various components, shaping the flow of your application.
00:02:34 Implementing the great React architecture requires deep integration between all parts of your app.
00:02:41 And this is where frameworks come in.
00:02:44 They take less tooling time.
00:02:46 That means that every aspect of your front-end development has seen innovation, from compiling, bundling, minifying, formatting,
00:02:54 deploying, and more.
00:02:55 With Next.js, we don't have to worry about configuring these tools, thus investing more time in writing React code.
00:03:05 We can focus more on business logic, using open source solutions for routing, data fetching, rendering, authentication, and more.
00:03:14 The learning curve is so easy.
00:03:17 If you're familiar with React.js, you will discover that Next.js is considerably simpler.
00:03:23 Next.js built on the foundations of React offers exceptional documentation that provides comprehensive and detailed information on the why and how of using Next.js.
00:03:38 The Introduction Learn Next.js guide developed by the Versel team is regarded as one of the best resources for the learning experience.
00:03:47 The constant updates and help from the community make the development process even easier.
00:03:54 One of the key aspects of Next.js is that it is not just a front-end React framework, but a full stack framework, enabling you to write backend code alongside
00:04:05 your front-end code.
00:04:07 So how does that contribute to an easy learning curve?
00:04:10 Wouldn't it be yet another thing to learn?
00:04:13 Well, absolutely not.
00:04:16 The backend aspect of the code you'll be working with is much simpler than you might anticipate.
00:04:21 There's no need to set up anything or configure any routes, as we have to do for traditional backend applications.
00:04:29 In fact, the vice president of Versel, Lee Robinson, expressed the following viewpoint.
00:04:36 Moving from React Express and Webpack to a framework resulted in removing 20 plus thousand lines of code and 30 plus dependencies,
00:04:45 while at the same time improving hot module reloading from 1.3 seconds to 131 milliseconds.
00:04:53 And if the backend and tooling aspects that I've just mentioned seem confusing, there's no need to worry.
00:05:00 In the upcoming lectures, we will dive deep into practical comparisons of how things are done with React and Express, as well as how both can be accomplished
00:05:11 within Next.js.
00:05:13 Next.js also offers improved performance through built-in features like server-side rendering, static generation, automatic code splitting,
00:05:22 and all of these things also optimize application performance and enable faster initial page load times, improve SEO, and also enhance the user experience.
00:05:35 However, it doesn't mean server-side capabilities are limited to Next.js alone.
00:05:40 React has introduced a new concept called React Server Components, which allows rendering components on the server-side.
00:05:48 So, wondering about why you would choose Next.js over React.js alone would be valid.
00:05:54 The advantage lies in the convenience and productivity provided by Next.js.
00:06:00 By utilizing Next, you can leverage the existing features of React without the need for extensive setup and configuration.
00:06:08 Next.js automates many aspects, allowing you to focus more on utilizing the features rather than dealing with infrastructure and boilerplate code.
00:06:18 This approach follows the principle of convention over configuration.
00:06:23 streamlining the development process and reducing the amount of code you need to write compared to implementing React server components independently.
00:06:32 Another big aspect of Next.js is improved SEO or search engine optimization.
00:06:39 Perhaps the most ignored, but also one of the most important topics in an application's life, and the only drawback of React.js.
00:06:48 The key difference lies in the rendering approach between Next.js and React.js.
00:06:54 Search engine crawlers are like busy visitors to websites.
00:06:59 They come and ask for the content of pages.
00:07:02 They explore the links on those pages, carefully examining and organizing them for ranking purposes.
00:07:08 This is what they do every day and they get tired, right?
00:07:12 They want to quickly know what is there to visit or they're not going to like it at all.
00:07:17 So to do their job well, they need to be able to access the content of the website immediately.
00:07:24 And React.js renders everything on the client side, sending a minimal HTML response from the server.
00:07:31 So how it works is the server sends a really minimal HTML file and then a huge JavaScript file that then the browser executes to generate the HTML.
00:07:43 This poses a challenge for search engine crawlers to access and understand the complete content of the page, because at the start,
00:07:51 it's not there.
00:07:52 It is being generated by JavaScript.
00:07:55 On the other hand, Next.js provides the option of static site generation, SSG, or also server-side rendering, or SSR.
00:08:05 With SSG or SSR, the server sends the complete HTML file and the minimal JavaScript code to render only the content requiring client-side interaction.
00:08:16 This enables search engine crawlers to access content easily and index every page of the Next.js website accurately.
00:08:26 But now you might wonder, why should I prioritize SEO?
00:08:31 Well, SEO is essential for making your website visible and highly ranked in search engine results.
00:08:38 When you focus on SEO, you get several benefits, like more people visiting your website, better user experience, increased trust and credibility,
00:08:48 and an advantage over your competitors because your website shows up higher in search results.
00:08:54 Giving priority to SEO can greatly impact how well your website does and how many people find it online, which is the most important point of why you're
00:09:04 creating your website in the first place.
00:09:05 Another big aspect of why you should use Next.js is that it is always advancing.
00:09:11 Next.js being the ever-evolving framework consistently introduces new features to simplify developers' lives.
00:09:20 With over 7 plus versions released last year, Next.js focuses on innovation and improvement for a better user experience.
00:09:30 This is precisely what frameworks like Next.js aim to achieve, making development easier and more efficient.
00:09:39 On top of that, other technologies like Expo, used for building React Native applications, are also adopting Next.js' groundbreaking features.
00:09:49 Inspired by Next.js' file-based routing system, Expo developers have implemented a similar feature, Expo Router, to improve the decade-old routing system
00:10:00 in React Native.
00:10:01 Isn't that great?
00:10:03 Master one feature and effortlessly utilize it across multiple platforms.
00:10:08 However, the list of features provided by Next.js goes beyond what has been mentioned so far.
00:10:15 It offers a wide range of capabilities, including seamless file-based routing, efficient code splitting, image and font optimization,
00:10:24 hot module replacement, API routes, built-in support for SaaS, CSS modules, data fetching choices, error handling, metadata API,
00:10:35 internationalization, and so much more.
00:10:38 It is best to try these features firsthand through practical implementation to truly appreciate its potential.
00:10:46 And that's precisely what we will do in the upcoming lectures.
00:10:50 Dive into the coding aspect.
00:10:52 Now, you've been listening to me for the last two lectures, and maybe you just like the sound of my voice, or maybe you really trust me.
00:11:00 But still, you might be thinking, alright, I'm willing to trust your insights on the new features of Next.js and such.
00:11:07 However, is it actually being used by people?
00:11:10 Are companies actively seeking professionals with Next.js expertise?
00:11:15 Is there a demand in the industry?
00:11:18 And if you're wondering the same, let the data speak for itself.
00:11:23 In the past 30 days, Next.js has received significantly higher search interest worldwide than React.js.
00:11:31 But hey, that's just the Google trend.
00:11:33 What about the industry?
00:11:35 Are people even creating websites using Next?
00:11:38 Well, let's take a look at the Next.js showcase, which shows different companies using Next.js.
00:11:45 Notion, Hulu, Netflix Jobs, Nike, HBO Max, Audible, Typeform, TED, Odd Zero, Product Hunt, Hyundai, Porsche, Apple, Marvel.
00:12:00 Futurism, Material UI, Coca-Cola, Ferrari, Hashnode, and Verge are only some of the names and websites that use Next.js internally.
00:12:13 And there are many, many more renowned names.
00:12:16 This list of incredibly powerful companies demonstrates the genuine excitement and widespread adoption of Next.js.
00:12:25 Considering the rapid rate at which companies embrace Next.js, it would be no surprise to witness a huge surge in demand for Next.js jobs in the coming months,
00:12:36 if not years.
00:12:37 Now is the perfect time to seize the opportunity and prepare for the future job market by mastering Next.js.
00:12:45 With this complete course and the signature JSM Stack Overflow application, you can become the next expert Next.js developer.
00:12:55 So, grab a cup of coffee and let's get started on this exciting journey.
