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

# Introduction
As mentioned in the lesson, [types of pre-rendering](https://www.educative.io/pageeditor/5404665623609344/5834681560858624/6077965761773568) fetching data can be done in different ways. I want to help you understand which way will be the best for each page and show you examples using the Giphy API, in addition to talking about the pros and cons of each method.

# Questions you need to ask yourself
* Does my page require data?
* Will the data change and need to be updated each time the page is loaded?
* Will the data be used to create HTML that needs to be indexed by search engines?
* If the data does not need to be indexed by search engines, is there an alternative to server-side rendering the page?

By asking these questions, you will determine the type of pre-rendering necessary for your page.

# Giphy API key
The Giphy API key is used for the Giphy Search App that you will build throughout the course and for the examples that you will see in this specific lesson. I will show you here how to get your Giphy API key.

Go to this page: https://developers.giphy.com/

Click on the **Get Started** button.

Fetching data from APIs can be done in several different ways with Next.js.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Giphy API and Fetching Data

Introduction

Questions you need to ask yourself