How to use Image and Preview in your Nextjs & Strapi Blog

Blogs
1

Strapi and Next.js are the best headless CMS and application development environments available on the market today! They are two powerful technologies that can work in tandem to give you the best digital experience possible.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-use-image-and-preview-in-your-nextjs-strapi-blog
2

Thanks for writing this tutorial Amir, appreciate it. (We are new to Strapi and just followed this guide)

It would have been more useful for me personally to go into a little bit more detail on the configuration of preview mode.

For example, I see that there is a ‘secret=GwpRUnwb7otnm2InuPeWGYiUNn0TJ8PK’ query in banner.jsx but there is no mention where this secret key is derived from.

How do I turn preview mode on if it is hidden?

4

Forget above :joy: :joy: :blush:

Too early on a Sunday for my brain to be in gear.

For any fellow Sunday morning imbeciles testing locally you go to http://localhost:3000/api/preview?secret=GwpRUnwb7otnm2InuPeWGYiUNn0TJ8PK&slug=how-to-play

secret comes from process.env.STRAPI_PREVIEW_SECRET and then is redirected using /api/preview.js with res.writeHead(307, { Location: /blogs/${slug} });

5

Hi @mckennapaul27 Glad you could find the answer. If you have any questions please let me know.

1 Like
6

Hello everyone, Multiple image uploads with preview

Follow this snippet - Multi image upload with preview