chapter-three/next-drupal

Next.js for Drupal has everything you need to build a next-generation front-end for your Drupal site: SSG, SSR, and ISR, Multi-site, Authentication, Webforms, Search API, I18n and Preview mode (works with JSON:API and GraphQL).

Next.js for Drupal

Next-generation front-end for your Drupal site.

Demo

https://demo.next-drupal.org

Documentation

https://next-drupal.org

Deploy to Vercel

Example

A page with all "Article" nodes.

import { DrupalClient } from "next-drupal"

const drupal = new DrupalClient("https://cms.next-drupal.org")

export default function BlogPage({ articles }) {
  return (
    <div>
      {articles?.length
        ? nodes.map((node) => (
            <div key={node.id}>
              <h1>{node.title}</h1>
            </div>
          ))
        : null}
    </div>
  )
}

export async function getStaticProps(context) {
  const articles = await drupal.getResourceCollectionFromContext(
    "node--article",
    context
  )

  return {
    props: {
      articles,
    },
  }
}

Supporting organizations

Development sponsored by Chapter Three

Contributing

If you're interested in contributing to Next.js for Drupal, please read the contributing guidelines before submitting a pull request.

next-drupal's Issues

Example code of getResourceByPath is invalid

https://next-drupal.org/docs/reference#getresourcebypath

Example uses extra first parameter "type" , which is not found in the actual implementation.

Vercel shows internal server error for next-drupal node module

14:00:51.677	Error: Internal Server Error
14:00:51.677	at /vercel/path0/node_modules/next-drupal/dist/index.js:86:19
14:00:51.677	at processTicksAndRejections (internal/process/task_queues.js:93:5)
14:00:51.677	at async getStaticPaths (/vercel/path0/.next/server/pages/blog/[...slug].js:3196:17)
14:00:51.678	at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:16:80)
14:00:51.678	at async /vercel/path0/node_modules/next/dist/build/utils.js:26:622
14:00:51.678	at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Oauth: The resource owner or authorization server denied the request

I'm very new to Oauth so please bear with me if I have something terribly wrong, but I cannot get the oauth/token route to work, after following all the steps. I always get the response:

{error: "invalid_client", error_description: "Client authentication failed",…}
error: "invalid_client"
error_description: "Client authentication failed"
message: "Client authentication failed"

With logs in the Drupal backend:
League\OAuth2\Server\Exception\OAuthServerException: The resource owner or authorization server denied the request. in League\OAuth2\Server\Exception\OAuthServerException::accessDenied() (line 243 of /app/drupal/vendor/league/oauth2-server/src/Exception/OAuthServerException.php).

Symfony\Component\HttpKernel\Exception\HttpException: The JWT string must have two dots in Drupal\simple_oauth\Authentication\Provider\SimpleOauthAuthenticationProvider->authenticate() (line 81 of /app/drupal/web/modules/contrib/simple_oauth/src/Authentication/Provider/SimpleOauthAuthenticationProvider.php).

Doing a bit of debugging I found that the simple_oauth module appears to require the client_id explicitly set in the body of the post, whereas the next-js package doesn't include it:

Oauth2Token.php

if (!empty($body['client_id'])) {
      $consumer_storage = $this->entityTypeManager()->getStorage('consumer');
      $client_drupal_entities = $consumer_storage
        ->loadByProperties([
          'uuid' => $body['client_id'],
        ]);
      if (empty($client_drupal_entities)) {
        return OAuthServerException::invalidClient($request)
          ->generateHttpResponse(new Response());
      }
      $client_drupal_entity = reset($client_drupal_entities);
    }

get-access-token.ts

const response = await fetch(
    ${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/token,
    {
      method: "POST",
      headers: {
        Authorization: `Basic ${basic}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: querystring.stringify({
        grant_type: "client_credentials",
      }),
    }
)

Logging the body of the POST

Array
(
    [grant_type] => client_credentials
    [client_id] => undefined
    [client_secret] => undefined
)

As I say, I might be horribly wrong here, but I'm just desperately trying to get this working as it looks awesome. Any help appreciated!

addFields() not working for getResourceFromContext()?

Hi,

In an effort to reduce the amount of data for certain pages (nextjs is giving me warnings :) I'm trying to use addFields() on the params I pass to getResourceCollectionFromContext and getResourceFromContext within getStaticProps. This works fine for getResourceCollectionFromContext but for getResourceFromContext I keep getting all fields returned for the requested node and its included relationships.

It seems it should be possible as it is also used on getResourceFromContext in the advanced example from the docs (https://next-drupal.org/docs/data-fetching#advanced-example).

I tried it as well without drupal-jsonapi-params, by just setting the fields key in the params object. No luck.
I also tried using the query string (obtained by params.getQueryString()) and querying the Drupal jsonapi directly. Then I do get only the specified fields.

Is this a bug? Am I missing something?

Preview with moderated content / node revisions not working

Our Drupal setup is using content moderation and we noticed that draft versions of node cannot be viewed the same as unpublished content. We also noticed that node revisions (used by content moderation) in general cannot be viewed with the nextjs preview feature. Is there any way to make it work?

app builder command in README fails with invalid url

The app builder command fails with invalid url

$ npx create-next-app -e https://github.com/chapter-three/next-drupal-basic-starter

Found invalid GitHub URL: "https://github.com/chapter-three/next-drupal-basic-starter". Please fix the URL and try again.

Subrequests: get same results on different request

For those who have problems to get the node content:

We had the same problem as described in this issue: https://www.drupal.org/project/subrequests/issues/3049395

After applying the patch https://www.drupal.org/files/issues/2019-07-18/change_request_type-63049395-09.patch the results from the subrequests are fine.

Our installations:
Drupal 9.2.7
Subrequests 3.0.3
Next 1.0.0-beta5
PHP 7.3

Error: request to http://localhost:8080/oauth/token failed

Hello all,

I keep on having this error even though I have made every necessary configuration on Drupal side.

Please find below my .env configuration the Next.js app:

NEXT_PUBLIC_DRUPAL_BASE_URL=http://localhost:8080
NEXT_IMAGE_DOMAIN=localhost
DRUPAL_SITE_ID=next_blog
DRUPAL_PREVIEW_SECRET=secret-key
DRUPAL_CLIENT_ID=a1883d6c-bb20-4d21-a4a7-37d594e2462e
DRUPAL_CLIENT_SECRET=secret

For information,
My Drupal site is running on: http://localhost:8080 and
My Nextjs site is running on: http://localhost:3000.

Any help on this, please?

I cannot Submit and make Article work both in Marketing and Blog example.

Great project, with great instructions and documentation.
Everything works as expected in my first installation and attempt,
but the Article content types, that cannot be submitted both in the Marketing and Blog examples.
It returns "404 | This page could not be found." ...
May be I missed some crucial settings? (but I successfully completed all the Readme.md steps ... )

FetchError: request to https://drupal-site.ddev.site/oauth/token failed, reason: unable to verify the first certificate

From the Quickstart guide, as soon as I follow the 3. Run Site steps, I hit the following error on http://localhost:3000:

FetchError: request to https://drupal-site.ddev.site/oauth/token failed, reason: unable to verify the first certificate

I cannot realise what is causing this issue (from the Drupal site settings) ...

Thanks in advance for your support!

Error: 500 Service unavailable

I'm new to drupal and trying to setup drupal with next.js. I have followed every steps from https://next-drupal.org/docs/quick-start. I haven't found any issue while configuring drupal and next.js. But when I try to run my next.js project I get the following error:

Error: 500 Service unavailable (with message)
    at ..\next-js-project\node_modules\next-drupal\dist\index.js:23:15
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async getStaticProps (..\next-js-project\.next\server\pages\index.js:3584:20)
    at async renderToHTML (..\next-js-project\node_modules\next\dist\next-server\server\render.js:27:178
0)
    at async ..\next-js-project\node_modules\next\dist\next-server\server\next-server.js:112:97
    at async __wrapper (..\next-js-project\node_modules\next\dist\lib\coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (..\next-js-project\node_modules\next\dist\next-server
\server\next-server.js:137:387)
    at async DevServer.renderToHTML (..\next-js-project\node_modules\next\dist\next-server\server\next-s
erver.js:138:610)
    at async DevServer.renderToHTML (..\next-js-project\node_modules\next\dist\server\next-dev-server.js
:36:578)
    at async DevServer.render (..\next-js-project\node_modules\next\dist\next-server\server\next-server.
js:75:160)

I'm using windows and xampp. I setup my drupal in htdocs like following structure.

|--xampp
      |----htdocs
               |-----vendor
               |-----web
               |-----comoser

My environment data:

NEXT_PUBLIC_DRUPAL_BASE_URL=http://localhost:8080/web
NEXT_IMAGE_DOMAIN=localhost
DRUPAL_SITE_ID=18903ef4-b720-40cf-8557-f71eb8bed89c
DRUPAL_FRONT_PAGE=/node
DRUPAL_PREVIEW_SECRET=preview-secret-here-should-be-unique
DRUPAL_CLIENT_ID=71bdaea3-fecb-4f32-944e-d455fef8a837
DRUPAL_CLIENT_SECRET=abc1234

And I have added console.log(process.env) in _app.tsx and I think it show all of my environment data.

How can I solve this issue?
Thanks in advance.

Control Next site filtering from Drupal

I've created a Drupal instance to feed 2 next.js sites and configured the entity node > article to be resolved by entity reference. Don't know if this is a bug or could be a new feature request. Visiting each site, I see all nodes, regardless of their configured site. Probably I'm missing some tweaks on node.js side. But isn't possible to resolve this transparently, only from Drupal side + site resolver?

EDIT: OK, just found out this https://next-drupal.org/docs/data-fetching/filter-by-site. However, it would be nice to be able to avoid that.

getPathsFromContext for taxonomy terms

Is it possible to use the getPathsFromContext for taxonomy terms?

I'm using it like so:

const paths = await getPathsFromContext(
  ["taxonomy_term--themes"],
  context,
  { params: { 
    "filter[status]": "1"
  } }
)

This does return an array (with the correct amount of items) but the slugs are undefined:

{ 
  params: { 
    slug: [ 'undefined' ]
  },
  locale: 'en'
}

I couldn't find the use of getPathsFromContext for taxonomy terms in the examples so maybe it's just not implemented or am I doing something wrong?

Create next-app is giving me errors (while executing quick-start steps)

npx create-next-app -e https://github.com/arshad/next-drupal-basic-starter results is errors.

`Downloading files from repo https://github.com/arshad/next-drupal-basic-starter. This might take a moment.

Installing packages. This might take a couple of minutes.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR! next@"^11.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^10.0.0" from [email protected]
npm ERR! node_modules/next-drupal
npm ERR! next-drupal@"^0.12.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/Antonio_Estevez/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Antonio_Estevez/.npm/_logs/2021-07-09T20_02_46_343Z-debug.log

Aborting installation.
npm install has failed.`

Additional Information:

• MacOSX 11.2.3
• Node v16.4.2
• NPM v7.19.1

Can't find how to get includes from json api on getResourceByPath

I'm not sure if I'm doing something wrong but when I use getResourceByPath I can't get the paragraphs that are currently active on this contentType, I only get a reference to their ID but I can't include them the same way I do when using getResourceFromContext with the params object. Would be great to have the params object enabled here to get reference fields or entities like paragraphs the same way

FetchError 😢 reason: getaddrinfo ENOTFOUND

Hi! Thanks for publish this awesome project 🗡️

I wanted to try combination of Drupal + NextJS but i have problem when I'm initializing your example project following the Instruction here.
After i did all the steps, i recived error from Next.JS:

I'm using wodby/docker4drupal docker image, but i tried on XAMPP environment too, and on XAMPP i had a bit different error:

35| export async function getStaticProps(context) { const articles = await getResourceCollectionFromContext(
   |                                                                  ^
34| "node--article", 

As I undestood my connection between Drupal and Next.JS should be estabished well. I provided DRUPAL_CLIENT_ID and DRUPAL_CLIENT_SECRET in .env.local file. I also tried with NODE_TLS_REJECT_UNAUTHORIZED=0 flag.
I followed all the steps from tutorial couple of times with same result every time. What could be the problem? Sorry, i'm new with decoupling Drupal.

I will appreciate all your help! 😄

BTW I followed steps from #15 issue

use next/config instead of process.env

Using process.env in any code will prevent those variables from being passed on to various build and runtime phases if not using .env-files.
use next/config instead so that environment variables can be set and used from actual environment and not just .env-files

Allow modules to hook and alter the site preview

Right now the site preview is handled inside the HTMLRenderer which by default overwrites the $build['content] value.

We do this to remove accessory renderable elements and allow the preview (for instance the iframe) to take over.

For flexibility add a hook to allow modules to alter the preview after it has been assembled.

Error: Internal server error

I'm trying to set up a local Drupal installation with this module. Everything works, but when it's time to launch the site, I receive this, and I can't get to wrap my head around it. Any idea what's wrong or what I can do to get the local server up and running?

Server Error
Error: Internal Server Error
This error happened while generating the page. Any console logs will be displayed in the terminal window.

Using XAMPP, Drupal 9.3.2.

Preview a next.js page before publishing

I've managed to get iframe previews working for latest version and revisions so far.
Is there a way to preview changes of a page before publishing? Clicking the 'preview' button in Drupal does not render an iframe at the moment.
I've had a look through the documentation but nothing really stands out to me. Any guidance would be greatly appreciated.

Changing the node path alias pattern not reflecteded in next site

Issue defined in title.

Unable to resolve dependency tree on "npx create-next-app ..."

On the HEAD of the "main" branch of this repo, using node v16.6.2, as soon as I run:

npx create-next-app -e https://github.com/arshad/next-drupal-basic-starter

I receive the following BLOCKING error:

✔ What is your project named? … next-site
Creating a new Next.js app in /Users/xxx.xxx/Sites/next-drupal/next-site.

Downloading files from repo https://github.com/arshad/next-drupal-basic-starter. This might take a moment.

Installing packages. This might take a couple of minutes.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^11.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^10.0.0" from [email protected]
npm ERR! node_modules/next-drupal
npm ERR!   next-drupal@"^0.12.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/italo.mairo/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/italo.mairo/.npm/_logs/2021-08-11T22_23_03_603Z-debug.log

Aborting installation.
  npm install has failed.

What am I doing wrong?

Path alias pattern causes conflict between live and preview

Hello !

I'm facing a weird problem :

Setting blog/[node:title] as the path alias pattern does not work: On the app, the URL localhost:3000/blog/slug resolves to a 404, but localhost:3000/blog/blog/slug works but obviously isn't correct.
When I try to access the preview, the resolved URL is localhost:3000/blog/slug -> does not work (404)

When setting back the path alias pattern back to /[node:title] correctly resolves on localhost:3000/blog/slug.
The preview then resolves to localhost:3000/slug instead of localhost:3000/blog/slug, resulting in a 404.

Project structure is :

nextjs
    |___pages
          |____index.js
          |____[...slug].js
          |____blog
                 |___index.js
                 |___[...slug].js

next-drupal version used is 1.1.1, drupal/next version is 1.0.0

Drupal returning 2000 paths per request maximum

Hi, I found something quite odd when building an app with more than 2000 paths.

I have 6000 (3000 x 2 languages) nodes of one type (artwork) in my Drupal database but when I'm building the app, only 2000 are actually built when building the pages under /artworks/[...slug].js.

Is this a limitation from next-drupal, the next Drupal module or even the subrequests module ? I know that the basic Drupal/JSONAPI is limited to 50 nodes per request but I believe subrequests go through.

If we can't bypass this limitation, are we able to use limits to queue requests as long as we do not have all nodes ?

Running basic example fails due to peer dependency mismatch on Node 15 and Node 16

running npx create-next-app -e https://github.com/chapter-three/next-drupal-basic-starter

gives the following error on linux (Ubuntu/Mint), on Node 16

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^11.1.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^10.0.0" from [email protected]
npm ERR! node_modules/next-drupal
npm ERR!   next-drupal@"^0.16.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

404s for nodes created in non-default language in multilingual Drupal site

I've just started with your basic starter and an existing multilingual Drupal site and I am able to fetch all nodes on the index page (with getResourceCollectionFromContext)

But for individual nodes I get 404s for some of them, getResourceFromContext returns null.
I found out that the nodes that can't be found are nodes which were create in the second language of the site instead of the default.

Any thoughts on what I can do to make it work?

getView() expects a string

This is not a pressing issue as I have found a way around it for now, just curious as to whether the getView function has changed recently or I am doing something wrong.

The code snippet below is located in the example marketing package. Following the same format leavves me with an object yet getView is expecting a string.

// Load initial view data.
  if (type === "node--landing_page") {
    for (const section of node.field_sections) {
      if (section.type === "paragraph--view" && section.field_view) {
        const view = await getView(section.field_view, {
          params: {
            include: "field_location,field_images.field_media_image",
          },
        })

        section.field_view = {
          name: section.field_view,
          ...view,
        }
      }
    }
  }

I managed to work around it by using the below snippet:

if(type === 'node--home') {
    for (const paragraph of node.field_paragraphs) {
      if (paragraph.type === "paragraph--project_carousel_block" && paragraph.field_pcb_view) {
        const view = await getView(`${paragraph.field_pcb_view.resourceIdObjMeta.drupal_internal__target_id}--${paragraph.field_pcb_view.resourceIdObjMeta.display_id}`, {
          params: {
            include: "field_project_thumbnail_image.field_media_image,field_project_types",
          },
        });

        paragraph.field_pcb_view = {
          name: paragraph.field_pcb_view,
          ...view,
        }
      }
    }
  }

Am I missing something?

"Bad Request" error in Next, but no errors in browser or API client

Hi,

Thanks for providing this library!

I've followed the Quick Start guide (starting from scratch several times), but I'm continuing to receive a "Bad Request" error in the vanilla index.tsx page. From what I've been able to gather from my console.logging, the URL that gets fetched inside getStaticProps is incomplete, since I only ever see http://drupal.test/jsonapi.

However, when I access the complete URL (http://drupal.test/jsonapi/node/article) in the browser or the Insomnia API client, I get the expected response.

My .env.local file looks like this:

NEXT_PUBLIC_DRUPAL_BASE_URL=http://drupal.test
NEXT_IMAGE_DOMAIN=drupal.test
DRUPAL_SITE_ID=c2a54c8f-a62d-4679-a34e-0d8e7208decd
DRUPAL_FRONT_PAGE=/node

I've skipped the preview setup for now to try to simplify things, but I was receiving the same error when I completed those steps.

My local Drupal instance is being served by Laravel Valet.

I realize that's not a whole lot to go on, but I would appreciate any tips anyone might have for solving this issue.

Thanks!

Server Error: Unauthorized

As a follow up of this #14 resolution, I now hit this error on http://localhost:3000

Can't get menu inside getStaticProps in index.js

First of all, great module!

so far I've configured the module without much trouble to fetch content types and get dynamic aliases with pathauto, but when I try running this on my index.js (I'm using js instead of ts):
const { tree, items } = await getMenu("main")
console.log('items',items);
I get a not found error, and I'm sure the menu exists inside drupal and that its machine name is main so I'm not sure if I have to configure some entity or do something apart from fetching with your function:
Error: Not Found at /gitlab/drupalnext/node_modules/next-drupal/dist/index.js:169:17 at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:97:5) at async getStaticProps (webpack-internal:///./pages/index.js:72:7) at async renderToHTML (/gitlab/drupalnext/node_modules/next/dist/next-server/server/render.js:27:1780) at async /gitlab/drupalnext/node_modules/next/dist/next-server/server/next-server.js:112:97 at async __wrapper (/gitlab/drupalnext/node_modules/next/dist/lib/coalesced-function.js:1:330) at async DevServer.renderToHTMLWithComponents (/gitlab/drupalnext/node_modules/next/dist/next-server/server/next-server.js:137:387) at async DevServer.renderToHTML (/gitlab/drupalnext/node_modules/next/dist/next-server/server/next-server.js:138:610) at async DevServer.renderToHTML (/gitlab/drupalnext/node_modules/next/dist/server/next-dev-server.js:36:578)

any help will be highly appreciated.

Best regards

TypeError: Cannot read property 'some' of undefined

Any assistance on why 'some' is undefined?

TypeError: Cannot read property 'some' of undefined
at filter (webpack-internal:///./pages/index.tsx:71:41)
at Array.filter ()
at /Sites/next-drupal/examples/example-blog/node_modules/next-drupal/dist/index.js:124:29
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at async getStaticProps (webpack-internal:///./pages/index.tsx:66:20)
at async renderToHTML (/Sites/next-drupal/examples/example-blog/node_modules/next/dist/next-server/server/render.js:28:1780)
at async /Sites/next-drupal/examples/example-blog/node_modules/next/dist/next-server/server/next-server.js:112:97
at async __wrapper (/Sites/next-drupal/examples/example-blog/node_modules/next/dist/lib/coalesced-function.js:1:330)

Update docs for getResourceByPath

1. https://next-drupal.org/docs/reference#getresourcebypath
2. #87

Inverted params on getResourceByPath docs

Looking at the docs at https://next-drupal.org/docs/reference#getresourcebypath, I noticed that the functions must be used with path first and then nodetype, this can lead to confusion on using this great feature, hope it helps!

docs suggestion:
const node = await getResourceByPath("node--article", "/blog/hello-world")

correct way of using it:
const node = await getResourceByPath( "/blog/hello-world", "node--article")

Error: JSON:API does not yet support resource versioning for this resource type.

Some Drupal resources do not support revisions such as taxonomy terms (at least in 8.9.6). Hence JSON:API will complain when resourceVersion is provided, even if it's set to rel:latest-version unfortunately:

Error: JSON:API does not yet support resource versioning for this resource type. For context, see https://www.drupal.org/project/drupal/issues/2992833#comment-12818258. To contribute, see https://www.drupal.org/project/drupal/issues/2350939 and https://www.drupal.org/project/drupal/issues/2809177.
    at /Users/cali/src/webshop-next/node_modules/next-drupal/dist/index.js:478:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async getStaticProps (webpack-internal:///./pages/[...slug].tsx:92:16)
    at async Object.renderToHTML (/Users/cali/src/webshop-next/node_modules/next/dist/server/render.js:329:24)
    at async doRender (/Users/cali/src/webshop-next/node_modules/next/dist/server/next-server.js:1144:38)
    at async /Users/cali/src/webshop-next/node_modules/next/dist/server/next-server.js:1236:28
    at async /Users/cali/src/webshop-next/node_modules/next/dist/server/response-cache.js:64:36 {
  page: '/[...slug]'
}

This is an issue when using getResourceByPath(). Is there a reason it's explicitly specifying resourceVersion=rel:latest-version by default?

setup using docker?

Would it be possible to add a Guide on how to set this up using Docker?
I tried to just "Extend" using the .tar.gz file I can download from the drupal.org site, but said file doesn't include it's needed modules.

Having a next-drupal docker image that includes composer, would be neat imo

Update examples/drupal-site/composer.lock with composer update

It looks the examples/drupal-site/composer.lock is not updated with last HEAD of the "drupal/next": "1.0.x-dev" repo.
Probably the "composer update" should be run into the examples/drupal-site/ folder ,

Requests are very slow when building the app

Hi !

I'm encountering a pretty big issue with next-drupal, the build times are extremely high (on a localhost setup), I tried logging precise times in the built index.js in node_modules/next-drupal/dist and for every fetch I am getting between 1500ms and 4000ms which results in pages taking from 5 to 15 seconds to be built when running next build.

When I am running these requests myself with Postman (for example on /oauth/token which is ran by getAccessToken in next-drupal), it takes a maximum of 400ms. It is the same for every function used by next-drupal, getResourceByPath takes between 1500ms and 6000ms, etc...

The project I am working on needs to build around 2000 pages at build time, if the build of every page took around 2 or 3 seconds that would not be a big problem but the fact that right now it can take more than 10 seconds is just not conceivable.
I do not think it is caused by the fact that at build time it concurrently builds multiple page because when I am adding or editing a page the ISR takes between 5 and 15 seconds to (re)build the new page.

Do you have any idea of the cause ?

Node version / NVM/ Mac M1... ECONNREFUSED

I've spent a good bit of time debugging this random access token problem.

POST /oauth/token HTTP/1.1 Authorization: Basic MjhlNzQ2MTYtNDBjYy00YjhjLWE2OWUtYmJiMzU4NTk0NDNkOnNlY3JldA== Content-Type: application/x-www-form-urlencoded;charset=UTF-8

works fine in postman, terminal etc... but fails inconsistently across a few different sites within node-fetch

I THINK I've narrowed it down to node versions / nvm weirdness on M1 Apple Silicon.

Proposal: Add in to docs recommended local set up nvm version etc...

Question: Does this seem logical as the router of the problem? Could someone who is also seeing this issue test a change in node?

Incorrect peer dependency

warning " > [email protected]" has incorrect peer dependency "next@^10.0.0".

I've noticed that the above turns up in my Terminal. Everything seems to run fine, but do I need to adjust anything in my project?

My Next version is the following:

"next": "^11.1.2",

useMenu CORS in local

useMenu in layout page

Access to fetch at 'http://local.nextjs.com:8888/jsonapi/menu_items/main' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
index.esm.js?84fa:186 GET http://local.nextjs.com:8888/jsonapi/menu_items/main net::ERR_FAILED

It was not possible to parse your key

I've been running into the following issue below after following the quick start Guide

I check the drupal logs and get the following error: Lcobucci\JWT\Signer\InvalidKeyProvided: It was not possible to parse your key, reason: in Lcobucci\JWT\Signer\InvalidKeyProvided::cannotBeParsed()

Auth tokens are being generated when visiting the Next.js site and the path to the keys seem correct.

I'm running php 7.4

Example of code data fetching

https://next-drupal.org/docs/data-fetching#advanced-example

The first and second code example are trying to get type from getResourceFromContext instead of getResourceTypeFromContext

Graphql

Hello, just looking into using this module but I'll be using graphql rather than the rest api. Just wanted to check if it will work in particular with Incremental Static Regeneration.

TypeError: The "string" argument must be of type string or an instance of Buffer or ArrayBuffer. Received an instance of Object

Hi! Thanks for all the work you've put into this project.
I'm following the quick start tutorial and have managed to set things up, after a some setbacks with simple_oauth library.

But, currently, I'm having an issue viewing my blog posts. I can see them at the home page and can also see that all their content is fetched in home page, as a collection. But once I visit a specific one (blog/first-post, as in blog/[node:title]), I get a 404 in the Network tab in Google Chrome.

And also this error.

 1 of 1 unhandled error

Unhandled Runtime Error
Error: Failed to load script: /_next/static/chunks/pages/404.js

Source
.next\static\chunks\main.js (83:51) @ HTMLScriptElement.script.onerror

  81 | //    executes when `src` is set.
  82 | script.onload = resolve;
> 83 | script.onerror = ()=>reject(markAssetError(new Error(`Failed to load script: ${src}`)))
     |                                           ^
  84 | ;
  85 | // 2. Configure the cross-origin attribute before setting `src` in case the
  86 | //    browser begins to fetch.

I guess the following error is due to not getting any data in the response.

error - TypeError [ERR_INVALID_ARG_TYPE]: The "string" argument must be of type string or an instance of Buffer or ArrayBuffer. Received an instance of Object
    at Function.byteLength (buffer.js:726:11)
    at ServerResponse.apiRes.end (C:\Users\trogl\Desktop\next-next-next\node_modules\next\dist\server\api-utils.js:72:41)
    at C:\Users\trogl\Desktop\next-next-next\node_modules\next-drupal\dist\index.js:566:30
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Object.apiResolver (C:\Users\trogl\Desktop\next-next-next\node_modules\next\dist\server\api-utils.js:101:9)
    at async DevServer.handleApiRequest (C:\Users\trogl\Desktop\next-next-next\node_modules\next\dist\server\next-server.js:770:9)
    at async Object.fn (C:\Users\trogl\Desktop\next-next-next\node_modules\next\dist\server\next-server.js:661:37)
    at async Router.execute (C:\Users\trogl\Desktop\next-next-next\node_modules\next\dist\server\router.js:205:32)
    at async DevServer.run (C:\Users\trogl\Desktop\next-next-next\node_modules\next\dist\server\next-server.js:841:29) {
  code: 'ERR_INVALID_ARG_TYPE',
  page: '/api/preview'
}

SOLVED: Module '"next-drupal"' has no exported member 'DrupalNode'.

I just started a fresh install of npx create-next-app -e https://github.com/chapter-three/next-drupal-basic-starter and I'm getting the following problem in my VS Code.

import {
  DrupalNode,
  getPathsFromContext,
  getResourceFromContext,
  getResourceTypeFromContext,
} from "next-drupal"

Module '"next-drupal"' has no exported member 'DrupalNode'.

I checked a previous Next-Drupal project I worked on and DrupalNode wasn't being imported there. My current project also seems to work fine.

Is this new? Do I need to configure or install a different version of next-drupal? This is what I have currently...

"dependencies": {
    "@hookform/resolvers": "^2.8.3",
    "axios": "^0.24.0",
    "next": "^11.1.2",
    "next-drupal": "^0.15.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.19.5",
    "styled-components": "^5.3.3",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@types/node": "^15.0.2",
    "@types/react": "^17.0.4",
    "autoprefixer": "^10.2.6",
    "babel-plugin-styled-components": "^1.13.3",
    "eslint": "^7.28.0",
    "eslint-config-next": "^11.0.0",
    "postcss": "^8.3.5",
    "typescript": "^4.3.5"
  },

Homepage working fine but the inner page returns Unhandled Runtime Error: Failed to load script: /_next/static/chunks/pages/404.js

Thank you for the wonderful module.

I followed these steps from the documentation after which I was able to access the homepage at http://localhost:3000/. But when I click on the Article Link it shows the following error:

Unhandled Runtime Error
_Failed to load script: /next/static/chunks/pages/404.js

Versions:
OS: Ubuntu 16.04
Drupal: 8.8.0
Node: v12.22.6

Screenshots:

Node page(Next JS) where error occurs:

Preview page in Drupal:
TypeError: The "string" argument must be of type string or an instance of Buffer or ArrayBuffer. Received an instance of Object

.env.local file:

Homepage(working)

fetch requests fail sometimes

Sometimes our fetch requests fail and I have no clue why. It's also not the same request which is failing.
Maybe someone could give me a hint where I could dig deeper.

Cannot read property 'default_langcode' of undefined

hi,

I use Drupal 9.2.2 and Next.js module. The problem after I install and configure next-drupal package and go to node page, I see the next message:

"Cannot read property 'default_langcode' of undefined"

It is possible that JSON doesn't provide data that next-drupal request. How can I resolve this issue? Thanks

Unauthorized on when using preview

I first want to start by thanking you for an amazing job on this module.
I'm getting an error when I set DRUPAL_CLIENT_ID, DRUPAL_CLIENT_SECRET and DRUPAL_PREVIEW_SECRET.

{ Error: Unauthorized at /home/superhetja/next/fristundir/node_modules/next-drupal/dist/index.js:24:15 at process._tickCallback (internal/process/next_tick.js:68:7) type: 'Error' }

The Error doesn't tell me a lot and I have tried debugging it without luck. The access log on the drupal server doesn't tell me a lot either
"POST /oauth/token HTTP/1.1" 401 5377 "-" "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)" "POST /oauth/token HTTP/1.1" 401 788 "-" "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)"
I don't know if I'm forgetting something in the oauth configuration or what could be wrong.
I'm Drupal version 9.2.0 on Apache with php 7.4.3

Next.js 12 support?

I am trying to add this project to an existing Next.js 12 site but it fails because next-drupal defines its next dependency requirement as "next": "^11.0.0". Will Next.js 12 be supported at some point? If so, is there an ETA?