- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- SCSS
- Flexbox
- CSS Grid
- Laptop-first workflow
- React Transition Group
- React - JS library
- Next.js - React framework
I learnt a lot on new things on next Js like:
- Using getStaticProps and getStaticPaths to pre-render contents from server to browser.
- Page routing
- Integrating backend
export async function getStaticProps() {
const res = await fetch("https://restcountries.com/v3.1/all");
if (!res.ok) {
throw new Error("Something went wrong!");
}
const data = await res.json();
const loadedData = data.map((country) => {
return {
name: country.name.common,
population: country.population,
region: country.region,
capital: country.capital
? country.capital
: "This country has no capital",
flag: country.flags.svg,
};
});
return {
props: {
newData: loadedData,
},
revalidate: 10,
};
}
- Next js
- React Transition Groups
- UseContext
- Frontend Mentor - @ejim11
- Twitter - @favourejim56