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

Let's talk about what dynamic routes are and how they work. 

First, what if you had a news site that had different articles at different URLs?

For example: 

* `somegreatnews.com/article/974232`
* `somegreatnews.com/article/243423`

Each article is a different subject matter, but the layout of the page would need to be the same. It might include a title, an image, some text for the body of the article, and perhaps some other common things that would work nicely on a news site.

Imagine that this site has thousands of articles. You wouldn't want to create a new page for each one, right?

You would want to create a dynamic route that would grab the article id from the URL. This information is known as the route parameters and you can use that to retrieve the article data. With the data in hand, you can display it on the page.

Your homepage does a search for you and displays the results, but you have no way to save that search or share it with others. You can fix that by creating a dynamic route and accessing a route parameter to get your search terms. 

Here are just a few URLs that would return search results for your users once you are done creating it:

* `somethingmadeup.com/search/cats`
* `somethingmadeup.com/search/dogs`
* `somethingmadeup.com/search/mincraft`

This lesson will focus on creating the page and accessing the URL parameters. In the next lesson, you will grab the data from the Giphy API and display those results to your users.

# How to make the dynamic route

Notice that in the route below, the word `search` is static. It will not change. The route parameter after the `cats` will change:

`http://localhost:3000/search/cats`

To get that static word search as part of your route, you will create a folder inside the pages folder and name it `search`.

There are many applications that require pages to be created dynamically. Next.js provides a robust feature set for this functionality.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Dynamic Routes