Overview# Next.js for Drupal v2.0.0 was released on 2025/2/11.
https://next-drupal.org/
https://next-drupal.org/blog/next-drupal-2-0
When I tried it out, I found that the handling of BASE_PATH required attention, so this is a memo about it.
Environment Variables# The sample environment variables are as follows.
# # N N # D D # D E E R R R S R X X A U U R U e e T T u P P e P e q _ _ t A A q A u P I h L L u L h i U M e _ _ i _ t r B A n C C r R t e L G t L L e E p d I E i I I d V s C _ c E E A : _ D a N N f L / D O t T T o I / R M i _ _ r D n U A o I S A e P I n D E O T x A N = C n E t L = R R - _ - _ s e E d S d B i t T e E r A t r = m C u S e i R a R p E . e e n E a _ e v t d T l U x e r = . R a i R R o L m t e e e r = p h v v t g h l i e a r / t e s l i d t . t i e o p c f h d v c s o r i a e s : m o s t / / m i t e / f o h n s / r n i v i a o s i t d m r e m f o . i / r n e n a o m x / d m e a c m n m o i / t p n n a - l f / d v e i c m a . g i r c n n i o s f / a m e i c b r g o l v / n e i s f s c e i e r g s / / i s c c e o e r n s v s / i u c c m o e e n s r s / u n m e e x r t When specifying NEXT_PUBLIC_DRUPAL_BASE_URL with a base path included, such as https://site.example.com/xxx, API requests were sent to https://site.example.com/jsonapi/, failing to correctly retrieve resources.
Cause# When checking getResourceCollection where the error was occurring, I found that the buildUrl function used to create the request URL was using new URL(path, this.baseUrl);.
b a a u s s i } y } } y } l n n d c c ) i } r c l p s = c i } r c o } c } t c } a ) c r U o o ; f e o a e o f e . p ; o ) h o ) w ; o e r n n s u t b c t a { n p t ` s t g t w d n l r s ; i n w n c ; a r " n t l s s e ( r u u a h r } s ( a u $ e o e i i e s o e e s s i e a i e E s u ( t t a s l r i l c ) t p t r { a S t o t s t c s a . t t x c t s r t r p H r e . n l e = h a h n l r t R n h e o a o r d h t h p r n a u s a c a s d P { l t o c r e s A r p e l u c e r A : e t o o j t r e n h r e u E = " a o h = t c h i s u i t n e r h b e u : h n r s o h l a d P c a r n " r c h a P n o = t a i d : c P u s t o i s o p , r l a h r l d " , a a & ` i l a g u h l o p e a g p h p o s e w n t = c e r ) c ; p " m l & / s e r ( r { : i n o o T r ( o : t p . , h i s h a h o , s e $ . S a ) c z s i p y a ` n i t t i = o e n D m { i S ! { b e m ; e t e n t p m F s o o i h l n a e = r s = n e p p u g s C h : t i e s e e p n o r e a s r w u t g a a i m o i o : : t t s n o w . c ( p & s ( m t t l e l s t = n c = i . s w f a d h U a & t { e h h d n l . r s t o h o n . I e i e P R l r n . } U t e w u a ? y p i a n e c f t t s a L J t i t s ` r } c i e w . p t n w s x a J c e r ( s y n t ; l $ t t , a l e i g a . t c s h r r a p o p g = a ( { i h i o , o i w , h o i e i m a n e i r t o A t c n r t i e n n s a s t A o f l t h n u a s e t E g p l ) h p f y o s i ( t t l ? s t h r o i , i ( c W s t h h e . o h A r r n z { P s s a i . y , i p u i u o e s e t a e e l t a p s ! a r s t r s e h r a a e h p e . = r c . h s o . ? i a r r ( i , b = a e f , ( u j s m c c ? " P u m e r s t . s h h / r o i o s c t c o h b P ) ` " e p l p o c e n i a o a ; / ) f t d t l h ( s s b r $ ) i i E i l ( c ) . e j a { x o n o e e o ; d U e m l { } n d n c n l e r c s o $ s p s t d l s l t c { ) o ? i p e e ) s = a p i . o o c r ; . = l a { n d n i t i = e t t e n i a } h ( f o t o l " ` } { a f , n i o ` u : z b : , l t { e j t y " ( e " L p j c " o e s t ; c o " a $ n l { ) & e t & y : ? p " e j g o } s e p . o t t ` n Q i ) ; u o ; e n r s y . O l b o j c e a c l t e " : i n o s i e d a r 0 c , h P a r a m s ? s e a r c h P a r a m s . g e t Q u e r y O b j e c t ( ) : s e a r c h P a r a m s When I asked ChatGPT, I received the following answer.
When using new URL(path, this.baseUrl), if the path is an absolute path (such as /jsonapi), only the host portion of baseUrl is applied, and path prefixes like /xxx are ignored. As a result, API requests are sent to /jsonapi/ instead of the intended https://site.example.com/xxx/jsonapi/ .
Solution# ChatGPT suggested using patch-package. Below is the response.
patch-package allows you to apply patches to files within node_modules and maintain the changes.
Steps# n p m i n s t a l l p a t c h - p a c k a g e p o s t i n s t a l l - p o s t i n s t a l l
Add the following to scripts in package.json " } s c " r p i o p s t t s i " n : s t { a l l " : " p a t c h - p a c k a g e "
Directly edit node_modules/next-drupal/dist/index.js (if you have already made the changes, this is OK as-is) b u i } l d c c ) i } r U o o ; f e r n n s u t l s s e ( r u ( t t a s l r p H r e . n a u s a c a s t r e n h r e u h l a d P c a r , r l a h r l = c e r ) c ; s h a h e n D m { a e = r s = r w u c ( p & s h U a & t P R l r a L J t i r ( s y n a " o p g m / n e i s x A o f ) x p f y x i ( { " P s s a e e + r a a a r r p m c c a s h h t P ) h o a ; , b r j a t e m h c s i t s s = . . = b = a s " e o U b r j l e ) c ; t " & & F i " x g e e d t Q b u y e r h y a O r b d j c e o c d t i " n g i n i n s e t a h r i c s h P c a a r s a e m s ? s e a r c h P a r a m s . g e t Q u e r y O b j e c t ( ) : s e a r c h P a r a m s n p x p a t c h - p a c k a g e n e x t - d r u p a l
A file named patches/next-drupal+<version>.patch will be created.
With this setup, when you run npm install, the postinstall script will automatically apply the patch. Summary# With the above solution, I was able to communicate between Next.js 15’s App Router and Drupal 11.
There may be better approaches, but I hope this is helpful.