NextJs in 7 Minutes 🔥

Summary

Next.js, a powerful React framework by Vercel, is renowned for its SEO-friendly capabilities, utilized by major companies like Netflix and GitHub. Unlike typical React apps, which render on the client side and face SEO challenges, Next.js employs page building strategies like Static Site Generation and Server Side Rendering to deliver fast, static content suitable for search and social media bots. With features like file-based routing and built-in utilities for image optimization, Next.js enhances the React experience, ensuring high performance and user satisfaction. The latest version, featuring a Rust compiler, has further increased its popularity for its speed and efficiency.

Takeaways

• 🌟 NextJS is a powerful React framework developed and maintained by Vercel, known for its SEO-friendly capabilities.
• 🚀 Prominent companies like Netflix, GitHub, Uber, and Starbucks utilize NextJS for their web development needs.
• 🔍 Traditional React applications are client-side rendered, which can hinder SEO due to the reliance on JavaScript for content rendering.
• 🤖 Search and social media bots struggle to index client-side rendered content, affecting the visibility and ranking of websites.
• 🛠 NextJS addresses these issues by implementing server-side rendering and static site generation for improved SEO and faster content delivery.
• 📝 NextJS introduces file-based routing, simplifying URL structure and reducing the need for external routing libraries like React Router DOM.
• 🖼️ Built-in utilities in NextJS enhance image optimization and content structuring, streamlining the development process.
• 🏗️ Static Site Generation (SSG) in NextJS converts dynamic sites into static ones, improving load times and making content accessible to bots.
• 🔄 Server Side Rendering (SSR) allows for dynamic data fetching on the server, providing up-to-date content while maintaining the perception of static HTML to users and bots.
• ⏱️ Using SSR, websites can maintain fast first contextual paint times, improving user experience and aligning with core web vitals.
• 🔄 The 'revalidate' key in getStaticProps enables periodic content updates on static sites, striking a balance between static generation and dynamic content refresh.
• 🔧 The latest version of NextJS includes a Rust compiler, enhancing performance and making it a preferred choice among developers.

Q & A

What is NextJS and who maintains it?

NextJS is a popular React framework optimized for building SEO-friendly websites. It is built and maintained by Vercel.

Why do companies like Netflix, GitHub, Uber, and Starbucks use NextJS?

These companies use NextJS because it enhances the capabilities of React by providing server-side rendering and static site generation, improving SEO and user experience.

What is the main issue with typical React applications regarding SEO?

Typical React applications are client-side rendered, which means search engine bots cannot index the content properly, leading to poor SEO performance.

How does NextJS address the issue of social media bot previews?

NextJS allows for server-side rendering or static site generation, enabling social media bots to read the content of the page and generate accurate previews.

What is the significance of First Contextual Paint in the context of NextJS?

First Contextual Paint is a core web vital that measures when the main content of a page is visible to the user. NextJS improves this metric by reducing the time it takes for content to be rendered, enhancing user experience.

Can you explain the concept of file-based routing in NextJS?

File-based routing in NextJS allows developers to create pages by simply creating files in the 'pages' directory. The URL structure is automatically generated based on the filenames, eliminating the need for an external router.

What is the role of the getStaticProps() method in NextJS?

The getStaticProps() method is used in static site generation, where it fetches data that will be passed to the page as props. This data is then used to generate static pages that can be cached via a CDN for fast delivery.

How does Server Side Rendering (SSR) differ from Static Site Generation in NextJS?

SSR generates pages on the server each time they are requested, ensuring that users receive up-to-date content. In contrast, Static Site Generation creates pages ahead of time, which is ideal for content that does not change frequently.

What is the purpose of the revalidate key in getStaticProps()?

The revalidate key in getStaticProps() allows for periodic regeneration of static pages, providing a balance between the speed of static sites and the freshness of content.

What new feature does the latest version of NextJS offer?

The latest version of NextJS includes a Rust compiler, which significantly improves the framework's performance.

Why is NextJS considered an enhancement to the powers of React?

NextJS enhances React by providing solutions for SEO, content previews, and improved performance through server-side rendering, static site generation, and built-in features like file-based routing and image optimization.

Outlines

00:00

🌐 NextJS: The React Framework for SEO and Performance

NextJS is a highly praised React framework developed by Vercel. It is favored by major companies like Netflix, GitHub, Uber, and Starbucks for creating SEO-friendly websites. Traditional React applications render on the client side, which can lead to SEO challenges as search engine bots struggle to index JavaScript-driven content. This can also affect social media previews, as bots cannot execute JavaScript to generate previews. NextJS addresses these issues by allowing content to be pre-rendered, either server-side or through CDN caching, enhancing SEO and user experience. It introduces file-based routing, simplifying URL structure management, and offers built-in utilities for image optimization and content structuring. NextJS also supports static site generation and server-side rendering, catering to both static and dynamic content needs. Static site generation converts dynamic content into a static site for fast delivery and easy indexing, while server-side rendering ensures dynamic content is served with optimal performance.

05:03

🚀 Enhancing User Experience with NextJS's Page Building Strategies

NextJS further improves user experience and content accessibility through its page building strategies. It allows for both static site generation and server-side rendering, ensuring that content is readily available and up-to-date. Static site generation is ideal for content that doesn't change frequently, while server-side rendering is better suited for dynamic content. NextJS also introduces a hybrid approach where content can be revalidated periodically using the `revalidate` key in `getStaticProps`. This strategy ensures that static sites can be refreshed with new content at specified intervals. The new version of NextJS, which is free and open-source, includes a Rust compiler for enhanced performance. This makes NextJS an even more attractive choice for developers looking to leverage the power of React with improved SEO and performance.

Keywords

💡NextJS

NextJS is a React framework developed by Vercel, designed to facilitate the creation of SEO-friendly websites. It is integral to the video's theme as it discusses the benefits of using NextJS over a typical React application for better search engine optimization (SEO) and user experience. The script mentions that companies like Netflix, GitHub, Uber, and Starbucks use NextJS, highlighting its industry adoption.

💡SEO

SEO, or Search Engine Optimization, is the process of improving a website's visibility on search engines. In the context of the video, it is a key concept because NextJS is presented as a solution to the SEO limitations of traditional React applications, which are not friendly to search engine bots. The script explains how NextJS helps in creating websites that can be indexed by search engines like Google, thereby improving their search rankings.

💡Client-side Rendering

Client-side rendering refers to the process where HTML, CSS, and JavaScript are downloaded by the browser, and then JavaScript takes over to render the page. The video script uses this term to contrast traditional React applications with NextJS, pointing out that the former's reliance on client-side rendering can lead to SEO issues because search engine bots cannot effectively index JavaScript-rendered content.

💡First Contextual Paint

First Contextual Paint is a core web vital that measures the time it takes for the first piece of content to be painted on the screen. The video script discusses how client-side rendering in React applications can delay this metric, negatively impacting user experience and SEO. NextJS is presented as a solution to improve this metric by serving pre-rendered content.

💡Static Site Generation

Static Site Generation is one of the page building strategies in NextJS that converts a site into a static site before hand, which allows for faster delivery and better indexing by search engines and social media bots. The script explains that this method is suitable for sites with infrequent data changes and uses the example of a blog with one thousand posts being converted into a static site for improved performance.

💡getStaticProps()

getStaticProps() is a method in NextJS that is used in conjunction with Static Site Generation. It allows developers to fetch data that will be used to render pages at build time. The video script illustrates its use by stating that when a site is exported and built, NextJS uses this method to convert React components into a static site, which can then be cached via a CDN for fast content delivery.

💡Server Side Rendering

Server Side Rendering is another page building strategy discussed in the video script where the server generates the HTML content for a page on the fly. This method is beneficial for sites with rapidly changing data, as it allows for the delivery of fresh content with each request. The script contrasts this with Static Site Generation, noting that it provides updated content without the need to rebuild the entire site.

💡getServerSideProps()

getServerSideProps() is a method in NextJS used for Server Side Rendering, allowing data to be fetched from the server for each request. The video script explains that by implementing this method, a page can serve static HTML to the user while still fetching fresh content from the server, improving both user experience and SEO.

💡CDN

CDN, or Content Delivery Network, is a system of distributed servers that deliver web content to users based on their geographic location. The video script mentions CDNs in the context of caching and delivering static site content, highlighting their role in improving page load speeds and enhancing user experience.

💡revalidate

revalidate is a key in NextJS's getStaticProps() method that allows for content to be refreshed at regular intervals. The video script describes this as a middle ground between Static Site Generation and Server Side Rendering, where the site can be both static and periodically updated, ensuring that users see the most recent content.

💡Rust Compiler

The Rust Compiler mentioned in the video script is a new addition to NextJS that contributes to its performance improvements. While the script does not delve into technical details, it emphasizes the compiler's role in making NextJS faster, which is a significant aspect of the framework's appeal to developers and companies.

Highlights

NextJS is a React framework built and maintained by Vercel.

It is used for making SEO friendly websites.

Popular companies like Netflix, Github, Uber, and Starbucks use NextJS.

React applications are typically rendered on the client side.

Client-side rendering is not SEO friendly.

Social media bots cannot generate previews for client-side rendered content.

NextJS solves SEO issues by pre-rendering content.

NextJS uses file-based routing for URL structure.

Static Site Generation converts dynamic sites into static sites for faster delivery.

getStaticProps() is used for pre-rendering pages in Static Site Generation.

CDNs optimize content delivery for faster page speeds.

Server Side Rendering is used for sites with frequently changing data.

getServerSideProps() fetches data on the server for each request.

Revalidate key in getStaticProps() allows for periodic content updates.

NextJS is free, open source, and has a new version with a Rust compiler for increased speed.

NextJS enhances the capabilities of React by addressing SEO and performance issues.

Transcripts

NextJS is a very amazing react framework

Which is build and maintained by a company named Vercel

It is mainly used for

Making SEO friendly websites

And it is used by companies like Netflix, Github, Uber and Starbucks

When React is already so popular

Then why do all these companies use NextJS

Let's find out

A typical React application is rendered on client site

Which means HTML, CSS and JavaScript is downloaded by the browser

After that, JavaScript takes over and renders the whole page

Because of which browser gets one bundle

After that, all the other things like

Painting the content

Downloading an asset

And along with that, posting a blog or populating images

All these tasks are done by JavaScript

Although this approach sounds really good

But this approach has some downsides

One biggest downside is

This is not a SEO friendly approach

Because Bots like Google, cannot index these type of websites

Along with that if we talk about social meadia bots like Facebook, Google, Twitter

You guys must have seen sometimes

When you share the link of any social media post on WhatApp or other application

Then a preview image is generated

And a preview text is also generated which means,

Ahead of time, without visitng the page

These social media bots read the content of your page

Now all the content in React is populated through JavaScript

So JavaScript cannot be executed

Because of which social meadia bots cannot generate these type of previews

So by using React application in this way, the search rankings drop greatly

The reason for this is, it takes a lot of time for the First Contextual Paint to appear

And according to core web vitals, this is not a good thing

It does not give a good user experience

NextJS solves this big problem

By introducing page building strategies

NextJS works on a simple principle

That whatever data your browser will receive

It will already have content

Which means the main content will not be fetched by JavaScript

For a blog, the main content is the preview image and the post content

So this content will either come already generated from the server

Or else it is already build and converted to cache through a CDN

Not just this, NextJS has a lot of built-in features

Like file-based routing

In file-based routing you can simply make files in your source code

And after making these files, your URL structures

Will come according to these files

For example, if I make a component named index.js in my pages folder

And a component named blog.js

And a component named contact.js

So whenever I visit slash (/) blog slash contact

Or visit the homepage of the website

Then I can see all these React components by default

I don't have to use any external router

Typically this task in React is done by React router package named DOM

Which is more or less development effort

Along with this, for image optimization and to structure all the other contents

There are many built-in utilities in NextJS

Now lets talk about the most important feature of NextJS

Which is page building strategies

In Page Building Strategies, the first strategy is

Static Site Generation

In this, NextJS converts your whole site into a static site, before hand

For example, you have written a blog which consists of one thousand posts

Then your dynamic blog of one thousand posts will be coverted into a static website

So that its delivery is fast

And socila media bots and search engine bots are able to read your site properly

For doing this, all pages can implement a method named getStaticProps()

Which will return some props, which will be passed to that page again

By doing this, whenever you will export the next time and try to build your whole website

Then your whole NextJS website, which some way or the other uses React components only

It will be coverted into a static site

Which you can convert into cache through a CDN

Which means your content delivery will be very fast

Difference between a CDN and VPS is that

CDN is optimized for content delivery

Which means, your users will get very fast page speeds

But this strategy is only good for those sites in which data is not changed so often

If your data changes very quickly

Then you can use another page building strategy whose name is Server Side Rendering

In Server Side Rendering, every page can implement a method named getserverside props

And after implementing this, the resulting props

For example, in your getServerSideProp() you can request a fetch

And you can get that data from fetchAPI

Or you can pass the same component as props

By doing this, whenever an user will visit your page

They will get the static page after all their work is done on the server

So the user will think your site is giving all the static HTML

But in reality, your site is doing some work on the server

To fetch your content from the database

So the users and the social media bots and the search engine bots

Will get the thing which they need

Which makes them happy and which makes your ranking good

Along with that, your user will also get satisfaction

Because your core web vitals will be amazing

Your first contextual paint time will be short

And, because your content is changing very fast

You can see all those changes implementing on the fly

If we talk about Static Site generation

Until you build your site again, you won't be able to see the updated content

But by using this strategy, you will always see the updated content

If you want your content to keep refreshing also

And along with that you also want to build a static site

Then you can use a page building strategy in between these two

In which you can pass a key named revalidate in getstaticprops

By doing this, whenever your server will receive a request

Then your website will rebuild again after a certain period of time

I hope I have explained it to guys what NextJS is

And how does it makes the powers of React more better

You guys must try NextJS, its new version is out now

And its completely free and open source and an amazing framework

There is a Rust compiler in its new version

Which makes it more fast

And in today's date people prefer using it even more

I hope you must have learned something new from this video

Thank you so much guys for watching this video

And I will see you next time