Next.js - The ultimate way to build React apps

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.

Intermediate

31 Lessons

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

12 Playgrounds

6 Quizzes

This course includes

12 Playgrounds

6 Quizzes

Course Overview

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 giph...Show More

Course Content

Introduction

Get familiar with Next.js for enhancing React, optimizing SEO, and improving rendering methods.

Next.js is a React Framework

Client-Side Rendering vs. Server-Side Rendering

Search Engine Optimization (SEO)Core Features Quiz

Getting Started

Get started with building and deploying Next.js projects through practical, step-by-step applications.

Giphy Search App Preview Bootstrap a New Project Making Your First Change Making Next.js Easier to Use Running Next.js and First Steps Quiz

Development Tools & Pre-Rendering

Examine development tools and pre-rendering techniques like static generation and server-side rendering.

Static Optimization Indicator Types of Pre-Rendering Pre-Rendering Knowledge Quiz

Application Development

Grasp the fundamentals of creating static and dynamic pages, API data fetching, forms, and routing.

Statically Generated Page with No Data Giphy API and Fetching Data Statically Generated Page with Data Handling Forms Getting Data After a Page is Loaded Dynamic Routes Server Side Rendered Page with Data Links Components Are you ready to build out your application quiz?

SEO

Solve problems in optimizing <Head> tags and images for better SEO and performance.

Head and Meta Optimization Image Optimization Next.js SEO Quiz

Deployment and CI/CD

5 Lessons

Follow the process of deploying Next.js apps using Vercel, Git, environments, and custom domains.

Conclusion

1 Lesson

Build on the official Next.js and React documentation to enhance application development skills.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!