NextJS and Contentful Recipe Website

Summary

This web application displays recipes created with Next JS as the site generator and Contentful as the headless CMS.

I have used Tailwind CSS for styling. I have sprinkled in some css jsx in some files for demo purposes.

The demo is using the latest versions of React and Next.

"dependencies": {
    "@contentful/rich-text-react-renderer": "^15.19.0",
    "contentful": "^10.6.15",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }

Note: I used the pages folder instead of the new app folder in the project structure.

This website demonstrates some features from Next JS:

• Environment variables
• 404 page
• Next Image
• Next Link
• getStaticProps
• getStaticPaths

Tech and Tools

• JavaScript
• CSS
• HTML
• Next JS
• Contentful
• GitHub
• Vercel
• Tailwind CSS

Demo

Open demo on Vercel.

Note: Try going to a recipe that does not exist. Also try going to a page route that does not exist.

Link to Demo

Repo

Open GitHub Repository to view full source code.

Link to Repo