Next.js - The ultimate way to build React apps

Intermediate

31 Lessons

Certificate of Completion

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

Next.js is a React Framework

Client-Side Rendering vs. Server-Side Rendering

Search Engine Optimization (SEO)Core Features Quiz

Getting Started

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

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

Application Development

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

Head and Meta Optimization Image Optimization Next.js SEO Quiz

Deployment and CI/CD

5 Lessons

Conclusion

1 Lesson

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!

Looking for something else?

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath