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

In this lesson, I am going to show you how environment variables work with Vercel and Next.js. 

I mostly use them to connect to my database. I typically use Firebase, which is in the cloud. Because of this, they supply a set of strings that allow you to make a connection with their services. Vercel's environment variables allow me to connect to separate databases for development, feature, and production environments.

I am not actually going to hook up a database in this lesson, but I'll show you how to do it. You can use environment variables for all sorts of things, but this is a common use case.

# Set up the development environment Variables

First step is to create a file with the name of `.env.local`. 

A big thing in development is setting up different environments so that when you are developing you do not accidentally make breaking changes to the production application.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Development, Preview and Production Environments