api_key

Gain insights into building ultra-fast React apps with Next.js. Delve into static optimization, SEO practices, and deploying a giphy search app using the giphy.com API.

Next.js - The ultimate way to build React apps.png

nextjs.tar.gz

next_js

Create-next_js

React is an amazing framework that allows you to build front-ends that are unmatched in speed, functionality, and ease of use. Where React falls short though is its ability to optimize for search engines. That’s where Next.js comes in.

In this course, you will learn to build a giphy search app using the giphy.com API. To kick things off, you’ll learn how to statically optimize a Next.js page, creating an ultra fast loading experience for users. You’ll then dive into the inner workings of creating your giphy search app. 

In the back half of the course, you will learn how to optimize for SEO, and how to deploy your application. By the end, you will have a great new framework to add to your resume and a new shiny application to add to your portfolio.

Next.js - The ultimate way to build React apps

## How Next.js can help you with SEO
There are two main categories of SEO: On-page SEO and off-page SEO. 
* On-page SEO is often referred to as making your site or application search engine friendly. Next.js can help you with this type of SEO. 
* Off-page SEO includes creating backlinks to your site or creating a social media presence which Next.js can not help you with. 

## Why server-side rendering is good for SEO
In the last lesson, I showed you how server-side rendering and client-side rendering flowed. This flow of information from the client to and from the server has huge impacts on the way Google and other search engines will index your site. When your site uses server-side rendering, you can return all of the information to the browser in its entirety. This is important because the search engine crawls the page at that moment. If information is not there and your client is still trying to process JS, as well as get data from APIs, the information will be loaded on to the page after the crawl takes place. Even one second of client-side rendering can cost you on-page SEO value.

### When your application will get crawled with Next.js
Your application will get crawled and indexed as soon as the client receives an HTML document from the server. With Next.js, you can have all the information pre-loaded so the search engine robot sees all the information.





### When your application will get crawled with only React
Your application will get crawled and indexed as soon as the client receives an HTML document from the server. With React, it only sees a very basic HTML document. Only a short moment later, the client is able to generate all of the information and load it for the user to see. Unfortunately, even though all the information is there at this point, the search engine robot has already completed its crawl. Your full HTML document is completely ignored. 


## Summary
There are a lot of things that Next.js has built into its framework that will help you with SEO. I will cover them in detail throughout the course, but the take-away from this lesson is that server-side rendering is what makes Next.js SEO possible.

# How Next.js can help you with SEO
There are two main categories of SEO: On-page SEO and off-page SEO. 
* On-page SEO is often referred to as making your site or application search engine friendly. Next.js can help you with this type of SEO. 
* Off-page SEO includes creating backlinks to your site or creating a social media presence which Next.js can not help you with. 

# Why server-side rendering is good for SEO
In the last lesson, I showed you how server-side rendering and client-side rendering flowed. This flow of information from the client to and from the server has huge impacts on the way Google and other search engines will index your site. When your site uses server-side rendering, you can return all of the information to the browser in its entirety. This is important because the search engine crawls the page at that moment. If information is not there and your client is still trying to process JS, as well as get data from APIs, the information will be loaded on to the page after the crawl takes place. Even one second of client-side rendering can cost you on-page SEO value.

## When your application will get crawled with Next.js
Your application will get crawled and indexed as soon as the client receives an HTML document from the server. With Next.js, you can have all the information pre-loaded so the search engine robot sees all the information.





## When your application will get crawled with only React
Your application will get crawled and indexed as soon as the client receives an HTML document from the server. With React, it only sees a very basic HTML document. Only a short moment later, the client is able to generate all of the information and load it for the user to see. Unfortunately, even though all the information is there at this point, the search engine robot has already completed its crawl. Your full HTML document is completely ignored. 


# Summary
There are a lot of things that Next.js has built into its framework that will help you with SEO. I will cover them in detail throughout the course, but the take-away from this lesson is that server-side rendering is what makes Next.js SEO possible.

SEO. You've heard the term over and over again. SEO is crucial to your online success. Because of this, there is no way around it. You have to engage in SEO if you want traffic to your application. Next.js is built with SEO in mind.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Search Engine Optimization (SEO)

How Next.js can help you with SEO

Why server-side rendering is good for SEO

When your application will get crawled with Next.js

When your application will get crawled with only React

Summary