Add preview mode

[pepijn-vanvlaanderen]

Would be interesting to have a preview/draft mode included in this starter as well.

[abrorAbdullaev]

Even if we implement the preview feature in UI, can we extend the admin and add there a preview button somewhere without modifying the base module of @strapi/strapi?

[pepijn-vanvlaanderen]

Even if we implement the preview feature in UI, can we extend the admin and add there a preview button somewhere without modifying the base module of @strapi/strapi?

Yes, there are already numerous Strapi plugins that do that, this one seems closest:

• https://market.strapi.io/plugins/strapi-plugin-preview-button

[PaulBratslavsky]

That is a great idea. Will add it to the list.

[rrubio]

@pepijn-vanvlaanderen were you successfull adding the preview buttom to this demo? i'm the getting some erorrs at my end.

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'attributes')

Source
src/app/[lang]/[...slug]/page.tsx (18:22) @ attributes

  16 | const page = await getPageBySlug(params.slug, params.lang);
  17 | 
> 18 | if (!page.data[0].attributes?.seo) return FALLBACK_SEO;
     |                  ^
  19 | const metadata = page.data[0].attributes.seo
  20 | 
  21 | return {

[pepijn-vanvlaanderen]

@rrubio it is actually very straightforward when you follow the guide here: https://nextjs.org/docs/app/building-your-application/configuring/draft-mode

You just need a custom /api/preview/route.ts where the draftMode gets enabled, after that cookie is set al your pages are dynamically rendered and you have your preview.

[PaulBratslavsky]

I am going to keep this issue open for anyone wanting to add this as a PR. In terms of items on my list, this has lower priority.😅