Disclaimer: FoodAdvisor is the official Strapi v4 demo application. It has been replaced by the new LaunchPad demo application for Strapi 5.

FoodAdvisor v2

Restaurants are open again! This is the perfect moment to make this announcement. Today is the release of the new version of our Live Demo: FoodAdvisor V2

Why?

It turns out that Strapi has evolved much faster than our Live Demo, which by the way, does take some time to maintain. Indeed, there were few components, only one Dynamic Zone, and the i18n implementation on the front-end did not cover the whole website. To summarize, it wasn't demonstrating Strapi's full potential and it had to change.

We took the decision to improve the architecture of the Strapi app and to completely remake the front-end with Next.js. The website you are currently browsing, strapi.io, is made with the same stack, it was a good source of inspiration.

So basically, what's new in this v2?

Next.js

The front-end part of the previous demo was using React. However, we really wanted to update it with a newer and better solution for creating tomorrow's websites. Next.js is presented as being a very good choice and as I mentioned earlier, our own website is using this exact same stack.

Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps. It can be used to create progressive web apps, server-rendered apps, and static websites among many other things.

We decided for this demo to create an SSR Next.js app in order for you to directly see your changes from Strapi by simply refreshing your app. This does increase the responses times, but it was absolutely necessary for the purposes of this demo. As a comparison, our website is using the static site generation of Next.js, which makes it very fast.

More components, more Dynamic Zones

We wanted to better structure the application by using more components and more Dynamic Zones. It will therefore be less obvious to understand the architecture of Strapi for beginners, but we wanted above all, to equip this demo with a good and solid content architecture, which is clearly one of the most important things when it comes to creating something with Strapi: Well structured content/Structure your content well

We also implemented more Dynamic Zones as this might be the one feature that most people don't understand at first. I recommend you to read the article I wrote which contains a section about how the Strapi marketing team uses Dynamic Zones in order for you to learn more about this awesome feature that gives you more flexibility.

SEO

The front-end of the demo is now more SEO-friendly. The appropriate fields have been created in Strapi and a Next.js component implements them on the website. It is very simple to obtain good SEO performance with Strapi and I strongly recommend you check out this article which is about how the Strapi marketing team uses Strapi or another one that lists some best practices concerning SEO in Strapi.

Landing pages

Daniel Madalitso Phiri, our developer advocate, already implemented in the previous version of the demo a collection-type called Universal that allowed you to create pages on the fly. This is the exact same collection type that we have on strapi.io. We simply renamed itPage which makes more sense for non-tech people and we improved it.

Learn how you can easily create landing pages with Strapi, Next.js & the Dynamic Zone feature

Internationalization (i18n)

Each part of the front-end application can have a different version depending on the locale. Each one of them! In the previous version, only the description and the reviews of the restaurants were localized. Now, the whole front-end is.

Preview

This might be one of the most requested features for our demo: The possibility to preview the content, pages, single types you create in Strapi. For this v2, we simply implemented a preview button in the content manager that allows you to open your Next.js application in preview mode in order to visualize your content before you publish it.

We made a tutorial about how you can achieve this in your own Strapi v3 project!

Scheduling system

Also one of the most requested features, being able to schedule the publication of your content ahead of time. This is now possible by customizing the Strapi application using the cron system included in the app. Simply define a publish_at date and set the ready switch to true so that your data will be published at this exact date in the future.

If you need to unpublish it, click on unpublish, set the ready to false!

Conclusion

It was a lot of fun to update this official demo! We hope this new version will give you a better idea of what can be achieved with Strapi. Feel free to give it a try on our website by requesting a private instance, directly on your computer, or even on Gitpod!

Don't forget, Strapi is an open-source product, you own the code, you define your configurations, your controllers, your policies, you customize it as much as you want.

You are the chef!

See you in the next article!