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

<figure><img src="https://4267578989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4gCdNpVaNzIlj4PIF0gk%2Fuploads%2FBdFgqSPVR4sZ60NHjLoa%2FScreenshot%202024-09-17%20at%206.38.44%E2%80%AFAM.png?alt=media&#x26;token=6241764b-9c5b-4aa9-8d22-eb15c8ab6574" alt="" width="330"><figcaption><p>Paragraphs folder with integration templates</p></figcaption></figure>

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

<figure><img src="https://4267578989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4gCdNpVaNzIlj4PIF0gk%2Fuploads%2F9fELuRUTRnCHbGnWsI5t%2FCursor.gif?alt=media&#x26;token=25534aa0-982a-408b-9d5d-ac62d8ef36a5" alt=""><figcaption><p>ParagraphUnionFragment combines the paragraphs together</p></figcaption></figure>

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

<figure><img src="https://4267578989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4gCdNpVaNzIlj4PIF0gk%2Fuploads%2F5rEaQ2ivCbxotSKbwnMG%2FCursor.gif?alt=media&#x26;token=9034f326-fe45-447f-9450-2bfa152ff7be" alt=""><figcaption><p>Example paragraph component</p></figcaption></figure>

### 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

* [Shadcn/ui Documentation](https://ui.shadcn.com/)
* [Next.js Documentation](https://nextjs.org/docs)
* [Drupal GraphQL Module Documentation](https://www.drupal.org/docs/contributed-modules/graphql)