Open timcosgrove opened 11 months ago
If the preview routes present any difficulties, they can be deferred. We will have separate epic/tickets for preview.
Upon deeper investigation, next-drupal
seems to not support App Router.
next-drupal
provides functions getStaticPathsFromContext
and translatePathFromContext
, which require the context
parameter that is passed to getStaticPaths
and getStaticProps
(in Pages Router). Immediately, I see two obstacles trying to get these functions provided by next-drupal
to work with App Router:
context
parameter is not passed to generateStaticParams
(App Router). getStaticPathsFromContext
is raising errors being called from generateStaticParams
.The function getStaticPathsFromContext is raising errors being called from generateStaticParams.
The problem is with the usage of DrupalClient
. More specifically, it seems to be due to the fact that next-drupal
packages DrupalClient
together with all other functionality, specifically client-only functionality, so importing DrupalClient
is raising an error when that import happens in an page defined as a Server Component using App Router.
It seems like Webpack should be able to handle this and tree shake things out, but it's seemingly tripping over things. The client-only code does seem to be identified as unused code, but there's a TypeError being raised in one of the generated chunk files.
I'm still investigating this.
I forked next-drupal
and configured things to package DrupalClient
separately from the rest of the code. This was very much just a test, but it did work to resolve the issue described in the previous comment.
Another possible path forward is to migrate to App Router but to keep the pages as Client Components ("use client"
). This is effectively what Pages Router does by default, so we wouldn't be losing anything on that front.
This problem would remain:
The context parameter is not passed to generateStaticParams (App Router).
next-drupal
doesn't provide App-Router equivalents to getStaticPathsFromContext
and translatePathFromContext
, but there might be a workaround. It seems possible that we can still use those methods and construct the context
object manually. Initially, at least, this could likely be an empty object when passed to getStaticPathsFromContext
. For translatePathsFromContext
, we'd construct it from the path parameters passed to the component from generateStaticParams
.
next-drupal
support to migrate to App Router.async
and that means I'm not immediately sure how we'd fetch the data.next-drupal
updates for App-Router support (or if we decide we do have to move partially or completely off of next-drupal
).This would require some Webpack configuration:
webpack: (config, { isServer }) => {
if (!isServer) {
// don't resolve these server-only modules on the client
config.resolve.fallback = {
tls: false,
fs: false,
net: false,
dns: false,
}
}
return config;
},
next-drupal
for our needsDrupalClient
from other components and that removed the client-code-in-a-server-component problem described above, which is the main blocker currently. It was a very rough POC, though, and would require some more work.DrupalClient
next-drupal
but it would almost amount to that. It probably could amount to that, but we can probably still benefit from some type definitions and maybe a few other things.next-drupal
should not be called/bundled/accessed in any way, yet it is causing problems. We can investigate whether things can be configured differently to resolve this.Looks like there is movement in next-drupal to support App Router:
Moves the use-menu hook to a new entry point so that developers can import any of the other exports from the main entry point into their Server Components.
So, maybe moving to App Router without forking next-drupal will be possible by the time this issue is reviewed again.
User Story or Problem Statement
We should convert from our current page router-based setup to the new app router paradigm, as outlined in #14474 .
Description or Additional Context
A general migration guide is available in the Next.js documentation
Steps for Implementation
Initially here. Below, these steps are expanded more granularly.