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

We will use our `index.js` page, which is a pre-rendered page with data. We fetched some cat giphy's from the giphy API in a previous lesson.

> NOTE: Any type of page can get data asynchronously after the page is completely loaded on the client.

What you are trying to do is replace the server-side rendered page with data you fetch from your client based on a search term our user will supply.

## Storing pre-rendered data in state
Before accomplishing your goal of getting giphys based on the users' desire, you need to modify the existing code a little bit. 



We will use our `index.js` page, which is a pre-rendered page with data. We fetched some cat giphy's from the giphy API in a previous lesson.

> NOTE: Any type of page can get data asynchronously after the page is completely loaded on the client.

What you are trying to do is replace the server-side rendered page with data you fetch from your client based on a search term our user will supply.

# Storing pre-rendered data in state
Before accomplishing your goal of getting giphys based on the users' desire, you need to modify the existing code a little bit. 



Pre-rendering as much of the page, as you can is great but what about the times that you need to get information from the user to determine what to display? Of course, this is possible and what we will be covering in this lesson.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Getting Data After a Page is Loaded

Storing pre-rendered data in state