Allow preview from Next.js

Created on 18 March 2023, over 1 year ago
Updated 31 May 2024, 7 months ago

Problem/Motivation

The preview currently works great with Drupal as the presentation layer, but this module would be even more useful (and would make Drupal more useful as a decoupled CMS) if the preview could also be done through Next.js, which allows for previewing unpublished changes using the Next.js module β†’ .

Proposed resolution

The Next.js preview in Drupal is currently done using an iframe that loads a preview URL from the Next.js app, so in theory the preview sidebar could load that preview URL instead of a Drupal one.If the controls for refreshing the preview were on the left (form) side, this might be a fairly seamless switch.

✨ Feature request
Status

Postponed

Version

1.0

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada mandclu

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mandclu
  • πŸ‡ΊπŸ‡ΈUnited States brianperry

    @mandclu - thanks for submitting this. Very interested in this as well. I also maintain https://www.drupal.org/project/decoupled_preview β†’ and am hoping to support this type of preview for Next.js and other JS frameworks as well. In fact, this module had to borrow a little code from that to ensure preview data ends up in the preview temp store, even before the node is published.

    Would love to solve this in such a way that it could work for both of these modules and even others (recently ran into https://www.drupal.org/project/simple_decoupled_preview β†’ which seems to be focused on Gatsby atm) Since all of these are just referencing an external URL at the end of the day, that seems possible.

    If the decoupled version of this preview had feature parity with the Drupal version of same page preview, I think this could be extremely compelling.

  • πŸ‡ΊπŸ‡ΈUnited States cosmicdreams Minneapolis/St. Paul

    Maybe it would be good to do a round up of modules looking to improve the preview functionality and reference that on our module page somehow.

  • πŸ‡¨πŸ‡¦Canada mandclu

    Resurfacing this issue, in the hopes this could be incorporated into the next feature release. Some ideas to consider:

    • Could this module automatically detect the front end to use? Or would these need to be configured? Should this be part of the localStorage data?
    • Would there be value in being able to switch between different front ends (even among multiple Next.js front ends) on the flay? How would we incorporate this into the UI?
  • πŸ‡ΊπŸ‡ΈUnited States cosmicdreams Minneapolis/St. Paul

    That would necessitate the inclusion of an ability to control the url that is being previewed.

  • πŸ‡¨πŸ‡¦Canada mandclu

    Part of the Next.js configuration is a setting, per bundle, of the site(s) to be used for preview:

    Each site has a base url defined:

  • πŸ‡¨πŸ‡¦Canada mandclu

    As an interesting data point, here's a video that jmolivas recently shared on Slack of his Composable β†’ preview project: https://www.youtube.com/watch?v=39dhlyWay-k

    He says that he is currently working with the Next.js for Drupal maintainers to have it work with Next.js as well.

  • Status changed to Postponed 7 months ago
  • πŸ‡ΊπŸ‡ΈUnited States brianperry

    Would still love to do this, but marking this as postponed for now as I think we focus on improving the module for 'traditional' Drupal.

Production build 0.71.5 2024