Fetch

The Fetch API provides an interface for fetching resources (including across the network)
See MDN Docs →

Next.js has built-in fetch support both in browser and node environment.

It can be used both in your components and Next.js server-side methods.

Using on Client-side#

In your component
export const FetchExample = () => {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [data, setData] = useState([]);
useEffect(() => {
fetch(API_URL)
.then(res => res.json())
.then(
res => {
setData(res);
setIsLoaded(true);
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
err => {
setIsLoaded(true);
setError(err);
},
);
}, []);
}

Using on Server-side#

Next.js getStaticProps
export async function getStaticProps() {
// fetch no longer needs to be imported from isomorphic-unfetch
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts
}
}
}
function Blog({ posts }) {
// Render posts...
}
export default Blog
tip

Consider using react-query or swr plugins to handle client-side requests.
They can be used with promise-based methods (fetch, axios..)

Last updated on by Necati Özmen