---
title: "Build a modern restaurant website with Contentful and Solid"
description: "Learn how to use Contentful and Solid to build a modern restaurant website."
source: "https://www.netlify.com/blog/2021/10/25/using-contentful-and-solidjs-to-build-a-modern-restaurant-website/"
last_updated: "2026-07-10T21:28:40.000Z"
---
Hello!
Over the past few weeks, the Developer Experience team at Netlify has been working on building some demos to showcase how to integrate [Contentful](https://www.contentful.com/) with different frontend frameworks. In this blog post, I’ll go through the steps of building a small restaurant website using [Solid](https://www.solidjs.com/)!
As I mentioned in a [previous similar post using Next.js](https://www.netlify.com/blog/2021/10/19/build-a-modern-restaurant-website-with-contentful-and-next.js/), the team has decided to share a common data layer through the help of a [Netlify Build Plugin](https://www.netlify.com/integrations/) that pulls content from Contentful. If you’d like to learn more about this, check out [this post](https://netlify.com/blog/2021/10/20/learning-to-future-proof-sites-using-headless-cms-and-different-ssgs/) and [the open-source repo](https://github.com/netlify/demo-restaurant-sites-data)!
We also put together a [separate repository for our styles](https://github.com/netlify/contentfull-belly-styles) to make everything more reusable across demos.
The main goal of this project was to use different frameworks to:
- Build a demo site with a couple of pages
- Fetch some menu data for a restaurant
- Display the menu data with titles, descriptions, prices, pictures, etc.
- Fetch data about the restaurant’s details (contact, address)
- Display the restaurants details
If you’d like to learn more about how to set up Contentful and fetch data from the API, I’d refer you to \[this blog post\] that goes more into details.
What we’re going to cover now, is the integration with SolidJS.
## Setting up Solid
One thing I was really excited about when starting this demo is that Solid’s syntax is very similar to React.js so the learning curve is relatively small.
As my previous demo was using Next.js, I almost could reuse the code entirely!
The only change I had to make is in how Solid handles reactivity and uses a primitive called `createSignal` instead of the `useState` you might be more used to.
For example, in my Next.js demo, I have a `DietIcon` component that renders the type of food (Vegan, Pescetarian, etc.) for different menu items.
```
// Next.js code sampleimport { useState, useEffect } from "react";
export default function DietIcon({ type }) { const [foodType, setFoodType] = useState();
useEffect(() => { displayType(); }, [foodType]);
const displayType = () => { switch (type) { case "vegetarian": setFoodType("V"); break; case "vegan": setFoodType("VE"); break; case "pescatarian": setFoodType("P"); break; case "glutenFree": setFoodType("GF"); break; } };
return ( {foodType}
);}
```
This component does not necessarily need to use `useState` but I used it to show the very small difference between React.js and Solid.
The Solid version of this component looks like this:
```
// Solid versionimport { createSignal, createEffect, splitProps } from "solid-js";
export default function DietIcon(props) { const [local] = splitProps(props, ["type"]); const [foodType, setFoodType] = createSignal("");
createEffect(() => displayType());
const displayType = () => { switch (local.type) { case "vegetarian": setFoodType("V"); break; case "vegan": setFoodType("VE"); break; case "pescatarian": setFoodType("P"); break; case "glutenFree": setFoodType("GF"); break; } };
return ( {foodType}
);}
```
Overall, the code is almost entirely the same, except for the use of `createSignal`, `splitProps` and `createEffect` to handle reactivity.
The goal of this blog post is not to dive too much into how Solid works, if you’d like an introduction to this library, I also wrote [this blog post on CSS-tricks](https://css-tricks.com/introduction-to-the-solid-javascript-library/).
The main takeaway is how smooth it was to switch from using Next.js to using Solid with Contentful. 😍
## Demo
If you’d like to play around with this, feel free to [have a look at the demo site](https://demo-restaurant-contentful-solid.netlify.app/).
You can also check out the [GitHub repository](https://github.com/charliegerard/demo-restaurant-contentful-solid) or deploy this template directly to Netlify by clicking on the button below!
[](https://app.netlify.com/start/deploy?repository=https://github.com/charliegerard/demo-restaurant-contentful-solid)
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=Using Contentful and SolidJS to build a modern restaurant website&url=https://www.netlify.com/blog/2021/10/25/using-contentful-and-solidjs-to-build-a-modern-restaurant-website//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F10%2F25%2Fusing-contentful-and-solidjs-to-build-a-modern-restaurant-website%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/10/25/using-contentful-and-solidjs-to-build-a-modern-restaurant-website//)
- [Bluesky](https://bsky.app/intent/compose?text=Using Contentful and SolidJS to build a modern restaurant website+https://www.netlify.com/blog/2021/10/25/using-contentful-and-solidjs-to-build-a-modern-restaurant-website//)
* * *
### Tags
- [Contentful](/blog/tags/contentful/)
- [solid](/blog/tags/solid/)
- [Frontend](/blog/tags/frontend/)
## Keep reading
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
Guides & Tutorials May 15, 2026
[
### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO
](/blog/tracking-ai-search-traffic)
- 
Nahrin Jalal
## Recent posts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
News & Announcements June 24, 2026
[
### How we measure Netlify’s Agent Experience
](/blog/how-we-measure-netlify-agent-experience)
- 
Sean Roberts
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)