//fetch is your typical fetch function but it's extended by Next.js
async function fetchData(params) {
const res = await fetch('https://pokeapi.co/api/v2/pokemon')
return res.json();
}
async function Page() {
const data = await fetchData();
return <div>{data.results.map(result =>
<p key={result.name}>data.name</p>;
)}</div>
}
This is a Server component by default
We can now do Static site Generation with fetch
How to fetch static data in Next.js 13 vs 12
To create a new page, we need to create a special file name called 'Page'
//allows you to fetch 'pokemons' in the cache
async function getStaticProps(params) {
const res = await fetch('https://pokeapi.co/api/v2/pokemon')
const data = await res.json();
return {
props: { data }
}
}
async function Pokemon({ data }) {
return <div>{data.results.map(result =>
<p key={result.name}>result.name</p>;
)}</div>
}
Next.js 13
Next.js 12
By default, it adds a param to fetch { cache: 'no store'} which means it's going to fetched and cached
We are fetching Pokemons using Static Site Generation (SSG)
bulbasaur
pikachu