Create a food ordering app with Strapi and Next.js 2/7

1

What we are building:

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

This is a companion discussion topic for the original entry at https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2
2

Very nice! One tip: In the section where restaurants are created, before the Allow Access section, after saving the objects, you should mention that they also need to be published! I found this was necessary to list the data from the api endpoint.

4

With the latest version of Strapi you need to put a /api before requests, meaning instead of getting a list of all restaurants from localhost:1337/restaurants you use localhost:1337/api/resturants. Hope this helps anyone who got stuck like me.

5

In the latest version of graphQl , the format of the query doesn’t work anymore.
it should be like :slight_smile: restaurants {
data {
id
attributes {
name
description
Image{
data{
attributes{
url
}
}
}

      }
  }

}
}
now

6

i get stuck with add restaurant instead of it showing list of the restaurant

7

Hi there
Great tutorial
For part two of the tutorial.
In the new version of strapi to show the images in the restaurant list you need : http://127.0.0.1:1337 and not http://localhost:1337:

Beneath what you need need to change in RestaurantList.jsx

     <Image
          className="w-full rounded-2xl"
          height={300}
          width={300}
          src={`${process.env.STRAPI_URL || "http://127.0.0.1:1337"}${
            data.attributes.image.data[0].attributes.url
          }`}
          alt=""
        />

and not

     <Image
          className="w-full rounded-2xl"
          height={300}
          width={300}
          src={`${process.env.STRAPI_URL || "http://localhost:1337"}${
            data.attributes.image.data[0].attributes.url
          }`}
          alt=""
        />
8

Hi there,
it is indeed a great tutorial.
I ran into same problem with the new version of strapi to show the images of the restaurant list. Thanks for the tip.
Also you will have to change the hostname from localhost to 127.0.0.1 in the next.config.js

const nextConfig = {
	reactStrictMode: true,
	images: {
		remotePatterns: [
			{
				protocol: 'http',
				hostname: '127.0.0.1',
				port: '1337',
				pathname: '/uploads/**',
			},
		],
	},
};

I did work for me,

9

I had to change next.config.js to this to get restaurant images to load:

/** @type {import(‘next’).NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: “http”,
hostname: “localhost”,
port: “1337”,
pathname: “/uploads/",
},
{
protocol: “http”,
hostname: “127.0.0.1”,
port: “1337”,
pathname: "/uploads/”,
},
],
},
};

module.exports = nextConfig;

10

I also had trouble displaying the restaurant images. I incorporated the recommendations that have been posted in the comments. In addition, I amended the RestaurantCard Image as follows:

Instead of:

<Image
          className="w-full rounded-2xl"
          height={300}
          width={300}
          src={`${process.env.STRAPI_URL || "http://localhost:1337"}${
            data.attributes.image.data[0].attributes.url
          }`}
          alt=""
        />

I used:

<Image
className=“w-full rounded-2xl”
height={300}
width={300}
src={${process.env.STRAPI_URL || "http://127.0.0.1:1337"}${ data.attributes.image.data.attributes.url }}
alt=“”
/>