Components

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: