- Issue created by @effulgentsia
- 🇺🇸United States effulgentsia
I think this will take a bunch of work, but it will be pretty amazing once done! I think it'll be helpful to do this in steps. Here's the first few steps I propose (for each step after the first, I'd be happy to merge a working MR to the main branch):
- Go through the Next.js tutorial (all 16 pages). It's got some good information in there specifically targeted to Next.js 13 (when support for RSC was added via their new "app" router) and 14. Or at least, I feel like I learned a bunch by going through it.
- Create an initial app within
demo/themes/umami_nextjs/app(no need to create the Drupal theme yet, at this point let's just start with the next.js app only). Give it a root layout (for the<html>and<body>tags but not yet anything in the body other than{children}) and a catch-all route that all URLs will go to. At this step, just have this route render<div>{url}</div>whereurlis the URL that you're on, which you can reconstruct with the params and searchParams props. - Next, change the route to instead of displaying the URL, to fetch that URL (adjusted for host and port) from Drupal. For example, if the Next.js app is on localhost:3000 and the Drupal site is on drupal.dev, then if in the browser you visit
localhost:3000/a/b/c, the route should fetch the content ofdrupal.dev/a/b/c. At this step, it's better for the Drupal site to be using the regular Umami theme, not the Umami JSX theme. Once the route has that content, use happy-dom to get the innerHTML of just the div with thedata-off-canvas-main-canvasattribute. Have the route render that innerHTML into a div via the dangerouslySetInnerHTML prop. Optionally, to make this look like Umami, copy the<link>tags from a "View source" of the Drupal site into the<head>section of the app's root layout. The hrefs of these link tags would need to be adjusted to use the Drupal site's URL, since at this point the next.js app can't yet serve these CSS files. At this point, it's now hopefully possible to go to localhost:3000 and click around to navigate to different pages and see their content. - Next, replace
dangerouslySetInnerHTMLwith usinghyperscriptifyto convert the HTML into a React element. - Next, switch the Drupal site to use the Umami JSX theme, and wire up the call to
hyperscriptify()to pass in the components map. - Once we get this far, let's regroup to figure out the rest. For example, we'll need to figure out how to best get all the CSS served by Next.js (including both the global CSS still managed by Drupal and the Linaria CSS). But one feature I'm really looking forward to hopefully be able for us to try and have it "just work" is being able to map the 'a' element to Next.js's Link component in order to enable single-page-app behavior instead of full page refreshes.
- First commit to issue fork.
- 🇺🇸United States hooroomoo
hooroomoo → changed the visibility of the branch 1.0.x to hidden.
- 🇺🇸United States hooroomoo
hooroomoo → changed the visibility of the branch 3396649-add-a-demo to hidden.
- 🇺🇸United States effulgentsia
Turns out, we might not actually need a subtheme for this.
- First commit to issue fork.
- 🇺🇸United States bnjmnm Ann Arbor, MI
It is very possible some of the MR feedback is for my own code from the first JSX demo that has been ported to the next demo.
- 🇺🇸United States effulgentsia
Just doing some issue queue organization. Raising the priority to Critical just to add transparency that it's a key feature for an MVP.
- Status changed to Needs review
3 months ago 8:18pm 21 February 2024 -
bnjmnm →
committed 8c44e165 on 1.0.x authored by
hooroomoo →
Issue #3396649: Add a demo Next.js app
-
bnjmnm →
committed 8c44e165 on 1.0.x authored by
hooroomoo →
- Status changed to Fixed
3 months ago 7:37pm 26 February 2024 - 🇺🇸United States bnjmnm Ann Arbor, MI
Merged. This is very nice. We can fine tune etc in other issues, this big buddy deserves to get in and inspire work in other issues.
Automatically closed - issue fixed for 2 weeks with no activity.