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

## Making traditional components

When you created your pages, you created components. Because of how the *Next Router* works, you did not have to specify which component(s) would be needed for each page. This is something you are probably used to when creating pages with a React app. You can view your page components as a parent component. This is because if you want, you can import child components into your pages and use them.

## Implementing a component to be used on multiple pages

For your app, let's make a component that will be used at the bottom of every page. You will call it the **Footer** component, but you can name components anything you want. I will use this name because it describes what you will be using it for. In the component, you will create a link to the homepage, a link to the about page, and attribution for the Giphy API.

### Create the component file

First, you need a file before you can do anything else. It is the convention to make a folder called `components` inside the root folder of your application, but you should know that if you feel like naming it something else you can do that too. Inside that folder place the `Footer.jsx` file. Your structure should look like this now:



# Making traditional components

When you created your pages, you created components. Because of how the *Next Router* works, you did not have to specify which component(s) would be needed for each page. This is something you are probably used to when creating pages with a React app. You can view your page components as a parent component. This is because if you want, you can import child components into your pages and use them.

# Implementing a component to be used on multiple pages

For your app, let's make a component that will be used at the bottom of every page. You will call it the **Footer** component, but you can name components anything you want. I will use this name because it describes what you will be using it for. In the component, you will create a link to the homepage, a link to the about page, and attribution for the Giphy API.

## Create the component file

First, you need a file before you can do anything else. It is the convention to make a folder called `components` inside the root folder of your application, but you should know that if you feel like naming it something else you can do that too. Inside that folder place the `Footer.jsx` file. Your structure should look like this now:



Components are a big part of React, and so far, we have yet not used any components in the traditional sense within our Next.js app. I will explain how and why we can implement the components you are used to using with React.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Components