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

# When should I statically generate a page with data?

If you have a page that is going to use or display data from an API, but it does not necessarily have to look for updated data every time the page loads, then you can statically generate a page with data.

Let me give you an example using our *Giphy Search App*. I want to show users some giphys related to cats when someone lands on your home page. Any cat giphys will be fine to show. I am not really concerned if the Giphy API gets more cat giphys in the future and I am showing old ones. This is a good use case for generating a page statically with data. 

When you run a build on your application, the page is generated with data at that time. The page is then served to users from a CDN.

# How to implement 
Let's build out the functionality discussed conceptually above.

The most important part when creating these types of pages is the function `getStaticProps()`. Props refer to properties. These properties are what a page needs in order to render its HTML.

## `getStaticProps()`

Below you will see the implementation of `getStaticProps()`. You will use an `async` function because inside the `getStaticProps()` function you will use the reserved keyword `await`. When data comes from an API it can take some time. It may be only a few milliseconds, but you need to wait for that data to return before next can use it to process the page and generate the HTML.



You can generate pages with data statically. First, let's understand the best use case for this type of page.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Statically Generated Page with Data

When should I statically generate a page with data?

How to implement