DrupalX Frontend with Next

DrupalX Next.js Integration

Overview

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.

Component Structure

  • 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.

Paragraphs folder with integration templates

Paragraph Integration

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.

ParagraphUnionFragment combines the paragraphs together

Integrating a New Paragraph Type

To integrate a new paragraph type configured in Drupal:

  1. Add the paragraph type name to components/paragraphs/Paragraph[Bundle].tsx.

  2. 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.

  3. Update ./nextjs/graphql/fragments/paragraph.ts by adding the new paragraph type to the ParagraphUnionFragment constant.

Example paragraph component

Landing Pages

The "landing" content type in Drupal is set up to work seamlessly with this paragraph integration system.

Best Practices

  • 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.

Further Resources

PreviousSetupNextDrupalX AI

Last updated