Course

Introduction to Next.js 9

1
Initialize a Next.js 9 project with TypeScript
2m 11s
2
Understand static and dynamic Page Routing in Next.js
3m 4s
3
Set up Chakra UI to work with Next.js
2m 38s
4
Build straightforward API with Next.js API routes
2m 2s
5
Consume Next.js API routes with the SWR library on the client-side
2m 11s
6
Static Site Generation (SSG) in Next.js with `getStaticProps`
2m
7
Statically generate dynamic routes in Next.js with `getStaticPaths` and `getStaticProps`
2m 29s
8
Fetch data from an API on the server-side with `getServerSideProps` in Next.js
2m 28s
9
Set up Auth0 in a Next.js app for user Authentication
4m 52s
10
Implement user Authentication in a Next.js app with Auth0
3m 27s
11
Deploy a project on Vercel (formerly ZEIT) from a GitHub repository
3m 28s
12
Render the <head /> element dynamically in Next.js
1m 1s

Consume Next.js API routes with the SWR library on the client-side

InstructorXiaoru Li

Share this video with your friends

Send Tweet

Published 5 years ago

Updated 4 years ago

The cool thing about Next.js API routes is that we can directly consume the API endpoints from pages.

SWR is a nice tool for handling data loading state in React apps using hooks, and is a perfect companion for our Next.js application. In this lesson, we will learn how to use SWR - a data fetching library by Zeit - to consume API endpoints on the client-side, and conditionally render an error or a loading component when the data is not available.

View code for this lesson

Introduction to Next.js 9

Consume Next.js API routes with the SWR library on the client-side

Social Share Links