In this lab you will get your hands dirty with the JAM Stack, a very modern way of building a website, and get a first site up that are using J(avaScript) A(PIs) and M(arkup).
Today you will be building a products app using some of the most common and popular tools:
- Next.js to build/generate the site
- Contentful to store and deliver the content
- Netlifly to deploy the site
- Create a Next.js app using the Next starter create-next-app
npx create-next-app jam-stack
-
Inspect the codebase and try to understand how it's setup.
-
Create your own GitHub repo and push this code to it.
-
Create a Contentful account.
-
Create a "products" page to display a list of products.
- This page should display a list of products from Contentful. You need create a new Content Model and add content for this to work.
- You should be able to click on a product to be redirected to a product page.
- Create an account on Netlify and deploy your application by linking to your GitHub repo.
There are many good articles out there that describes everything in this setup. Check this one out for example
Please also search for some of your own, maybe you learn better from YouTube tutorials for example.
Good luck and have fun!