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

# Site analysis

Have you ever heard of Lighthouse or Pingdom? They grade your site. 

* [Lighthouse]( https://developers.google.com/web/tools/lighthouse#devtools)

* [Pingdom](https://tools.pingdom.com/)

# Low grades
One of the main reasons you will receive a low score from one of these site testing tools is because of your images. Most images, even smaller ones, are large files. These can significantly slow down a site if not handled properly.

# Image optimization you can do
There are a few things you should do before letting Next.js optimize your images. 

1) Use `jpg` images unless transparency is a factor, otherwise use `png`.
2) Programs like Photoshop can make images into a smaller file size at the cost of quality. Try making your images as small as possible without a noticeable difference to quality.
3) Use the correct image size. If your image will be displayed not larger than 700px at any time on the site then your image does not need to be larger than that.

# Next.js automatic image optimization

A new compression created and maintained by Google is [WebP](https://developers.google.com/speed/webp). WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Next.js can handle the conversion of all your images into WebP for you automatically. There is a little configuration involved, but it is well worth it.

At the root of your application, you will create a file named `next.config.js`.

Optimizing every image by hand one at a time can be time-consuming and costly. What if there were a way that it could be done automatically at the time of build? With Next.js, this is a reality.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Image Optimization

Site analysis

Low grades