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

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