DrupalX Frontend with Next
Last updated
Last updated
DrupalX comes with a fully-integrated Next.js frontend, configured to query data from DrupalX using the GraphQL module. This documentation outlines the structure and integration process for developers working with DrupalX and Next.js.
All DrupalX components are located in the ./nextjs/components folder.
Components are created using Shadcn/ui and organized in Storybook.
The components/paragraphs folder contains integration templates for Drupal paragraphs.
The ParagraphUnionFragment in ./nextjs/graphql/fragments/paragraph.ts controls which paragraphs render from landing pages. This setup facilitates easy management of paragraph types in Drupal.
To integrate a new paragraph type configured in Drupal:
Add the paragraph type name to components/paragraphs/Paragraph[Bundle].tsx.
In the same file, add fragments and props using the naming convention that includes the paragraph bundle/type.
Refer to the GraphQL Compose Fragments module in Drupal for recommended GraphQL fragments.
Update ./nextjs/graphql/fragments/paragraph.ts by adding the new paragraph type to the ParagraphUnionFragment constant.
The "landing" content type in Drupal is set up to work seamlessly with this paragraph integration system.
Maintain consistent naming conventions across Drupal and Next.js components.
Regularly review and update the ParagraphUnionFragment to ensure all necessary paragraph types are included.
Utilize Storybook for component development and testing.
