๐Ÿ Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - ๐Ÿ” Dishes list (part 3/7)

Strapi Next.js tutorial

This tutorial is part of the ยซ Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe ยป tutorial series.

Table of contents

Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial.

๐Ÿ” Dishes list

Congratulations, you successfully displayed the list of restaurants! This was the first major step.

Define Content Type

Every restaurant sells dishes, which also must be stored in the database. So, we now need a new Content Type, obviously named dish. Since you already know how to create it, I am going to give only its attributes:

  • name with type String.
  • description with type Text.
  • image with type Media.
  • price with type Number (integer).
  • restaurant with type Relation: this one is a bit more specific. Our purpose here is to tell to Strapi that every dish can be related to a restaurant. To do so, create a one-to-many relation, as below.

Strapi relation

Here is the final result:

Dishes fields

Add some entries

Then, add some dishes from the Content Manager: http://localhost:1337/admin/plugins/content-manager/dish. Make sure they all have an image and are linked to a restaurant.

Display dishes

Dishes list

We will use a new route for /restaurants that will take in the ID of restaurant and return the list of dishes for that restaurant:

cd ..  
cd ..  
cd pages  
touch restaurants.js  

Path: /frontend/pages/restaurants.js

Now you should see your list of dishes associated with that restaurant if you navigate via the browser.

We will add the cart in the upcoming sections, hang tight!

You will notice that if you navigate to the restaurant route and hit refresh, you will get a 404 page. This is because when you click the Link component the client is handling the routing, but on refresh the route is not found by the server.

404

To handle this we can setup an express server coupled with Next to render the route properly.

yarn add express  

Next create a file server.js inside the root of your project directory.

cd ..  
touch server.js  

Path: /frontend/server.js

To use the custom express server edit your packages.json file and replace the script section with:

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }

Restart the dev server, now with a refresh you should see the appropriate dishes as expected on a page refresh.

๐Ÿ” In the next section, you will learn how to authenticate users in your app (register, logout & login): https://blog.strapi.io/strapi-next-authentication.