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

Add a JSX file name `pageAbout.jsx` to the root Next.js folder

Add a file named `about.jsx` to the pages folder

?Import Next.js router and push the about page into the config

How do you add a page called "about" to a Next.js app?

How do you add a page called “about” to a Next.js app?

A statically generated page with data can be identified by the use of which function?

A statically generated page with data can be identified by the use of which function?

Taking user input from forms requires which React hooks?

Taking user input from forms requires which React hooks?

What types of pages can get data after they are pre-rendered?

What types of pages can get data after they are pre-rendered?

URL parameters we can access information from

Pages that don't need data to be updated regularly

Pages that need to show regularly updated information

Server-side rendered pages with data are best suited for...

Server-side rendered pages with data are best suited for…

You can use links exactly how you would in HTML with `a` tag.

You must first import `next/link` then you use special Next.js syntax for the link itself.

You need to add the `link` tag around the `a`. No import is required.

Select the statement that best describes how to use application internal links in Next.js

Select the statement that best describes how to use application internal links in Next.js

Understanding the Built-in Router and Page Types

Understanding the Built-in Router and Page Types

Let's test your understanding of page types and the built-in router.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Are you ready to build out your application quiz?