Drupal site preview of home page or a specific route/path (instead of [...slug].tsx)

[simon-olsen]

Hi! Working on a Next Drupal site for a client https://ro-digital.vercel.app/

Of course, the Home page index.tsx is a fairly customised page, but my client can still edit the main chunk of content via Drupal.

The page is a Basic Page and I have set up Site Preview for Basic Page entities.

Is there a way that I can configure it so when he looks at the Home Basic Page, it previews the home page route of the Next.js site in iFrame window instead of the page as it appears using [...slug.tsx].

FYI - the About page is also fairly custom, but I have a dedicated route about-ro-digital.tsx and I was able to update the Path Alias in Drupal to the same route /about-ro-digital so, when he previews this Basic Page in Drupal, he sees that dedicated route in the preview iFrame window.

I tried updating the Path Alias of the Home page to just / but that didn't work (as expected).

[shadcn]

I see. So you want the /home on Drupal to show the index.tsx page from Next.js?

[shadcn]

You can use the hook_next_site_preview_alter to do this.

Here's an example where I'm showing the preview for /about on the /home page.

/**
 * Implements hook_next_site_preview_alter().
 */
function MODULE_NAME_next_site_preview_alter(array &$preview, array $context) {
  /** @var \Drupal\node\NodeInterface $entity */
  $entity = $context['entity'];

  // Do nothing if we are not on the /home page.
  if ($entity->toUrl()->toString() !== "/home") {
    return;
  }

  // Get the Next.js site to render.
  // Assuming we have only 1 site here.
  /** @var \Drupal\next\Entity\NextSiteInterface $site */
  $site = reset($context['sites']);

  // Create a new preview url using the /about slug.
  $preview_url = Url::fromUri($site->getPreviewUrl(), [
    'query' => [
      'secret' => $site->getPreviewSecret(),
      'slug' => '/about',
    ],
  ]);

  $preview['iframe']['#attributes']['src'] = $preview_url->toString();
}

[shadcn]

@simon-olsen did this work?