{"id":44438748,"url":"https://github.com/eaudeweb/next-drupal","last_synced_at":"2026-02-12T14:29:50.808Z","repository":{"id":237477720,"uuid":"794504690","full_name":"eaudeweb/next-drupal","owner":"eaudeweb","description":"Drupal implementation for nextjs using next-drupal package","archived":false,"fork":false,"pushed_at":"2024-05-21T15:11:25.000Z","size":484,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-05-22T13:44:58.339Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eaudeweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-01T10:27:45.000Z","updated_at":"2024-06-04T14:02:35.283Z","dependencies_parsed_at":"2024-05-14T09:45:10.182Z","dependency_job_id":"58c9da02-5f1d-4050-ae49-fcf77422464b","html_url":"https://github.com/eaudeweb/next-drupal","commit_stats":null,"previous_names":["eaudeweb/next-drupal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eaudeweb/next-drupal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eaudeweb%2Fnext-drupal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eaudeweb%2Fnext-drupal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eaudeweb%2Fnext-drupal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eaudeweb%2Fnext-drupal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eaudeweb","download_url":"https://codeload.github.com/eaudeweb/next-drupal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eaudeweb%2Fnext-drupal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29368638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T08:51:36.827Z","status":"ssl_error","status_checked_at":"2026-02-12T08:51:26.849Z","response_time":55,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-12T14:29:49.360Z","updated_at":"2026-02-12T14:29:50.797Z","avatar_url":"https://github.com/eaudeweb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next-drupal\n\n## Getting started\n\nThere is no release for any of the packages under this repo. To use it please make use of mrs-developer.\n\n1. Install [Nextjs](https://nextjs.org/docs/getting-started/installation) project using `pages` directory. Note: only `next@13.x.x` is supported because of next-auth dependency.\n\n2. Add the following scripts under your `package.json`:\n\n```json\n{\n   \"scripts\": {\n      \"develop\": \"npx --yes -p mrs-developer missdev --output=../workspaces --no-config\",\n      \"develop:npx\": \"npx --yes -p mrs-developer missdev --output=../workspaces --no-config\"\n   }\n}\n```\n\n3. Add `pnpm-workspace.yaml` file in your project root, containing:\n\n```yaml\npackages:\n  - 'workspaces/**/packages/*'\n```\n\n4. Add desired dependencies:\n```json\n{\n   \"dependencies\": {\n      \"@edw/base\": \"workspace:*\",\n      \"@edw/drupal\": \"workspace:*\",\n   },\n   \"devDependencies\": {\n      \"eslint-config-custom\": \"workspace:*\",\n      \"tsconfig\": \"workspace:*\",\n   }\n}\n```\n\n5. Define `.eslintrc.js`. Override with your project necessities. This requires `eslint-config-custom` package.\n\n```js\nmodule.exports = {\n  extends: ['custom/next'],\n  rules: {\n      'react/no-unescaped-entities': 'off',\n  },\n  ...etc\n}\n```\n\n6. Define `tsconfig.json`. Override with your project necessities. This requires `tsconfig` package.\n\n```json\n{\n   \"extends\": \"tsconfig/nextjs.json\",\n}\n```\n\n7. For eslint perfectionist plugin add `internalPaths` under your `package.json` file:\n\n```json\n{\n   \"internalPaths\": [\n      \"@\",\n      \"~\",\n      \"@idra\"\n   ]\n}\n```\n\n8. Bootstrap global config in your `pages/_app.tsx` file\n\n```ts\nimport { config } from '@edw/base/src'\nimport { type DrupalConfigRegistry } from '@edw/drupal/src'\n\nimport installSite from '@/siteconfig'\n\nObject.assign(\n  config as DrupalConfigRegistry,\n  installSite(config as DrupalConfigRegistry),\n)\n```\n\n9. Configure `pages/_app.tsx`:\n```tsx\nimport { App as BaseApp, DefaultLayout } from '@edw/base/src/components'\nimport { withAuthInitialSession } from '@edw/drupal/src/hof'\nimport { SessionProvider } from '@edw/drupal/src/lib/auth'\n\n...etc\n\nexport default function App({\n  Component,\n  pageProps: { initialSession, ...pageProps },\n}: AppProps): React.JSX.Element {\n  const { breadcrumb, error, menus, node } = pageProps\n\n  return (\n    \u003cBaseApp initialAppState={{ breadcrumb, menus, node }} theme={theme()}\u003e\n      \u003cSessionProvider initialSession={initialSession}\u003e\n         \u003cDefaultLayout\n            error={error}\n            header={\u003cYourHeader /\u003e}\n            footer={\u003cYourFooter /\u003e}\n         \u003e\n            \u003cComponent {...pageProps} /\u003e\n         \u003c/DefaultLayout\u003e\n      \u003c/SessionProvider\u003e\n    \u003c/BaseApp\u003e\n  )\n}\n\n\nApp.getInitialProps = withAuthInitialSession()\n```\n\n10. Configure `pages/[[...slug]].tsx`\n\n```tsx\nimport {\n  compose,\n  withDrupalCommonResources,\n  withDrupalNodeResources,\n} from '@edw/drupal/src/hof'\n\n...etc\n\nexport const getServerSideProps = compose(\n  withDrupalCommonResources,\n  withDrupalNodeResources,\n)()\n```\n\n11. Define `pages/api/auth/[...nextauth].ts` apis for next-auth:\n\n```ts\nimport NextAuth from '@edw/drupal/src/lib/auth'\nexport default NextAuth\n```\n\n## Technology stack\n\n- [Nextjs](https://nextjs.org/) - React-based web development framework\n- [Drupal-Next](https://next-drupal.org/) - JS lib to communicate with Drupal backends\n- [Antd](https://ant.design/) - React component library and theming engine\n- [TanStack/Query](https://tanstack.com/query/v5/) - Data management library\n\n### Infrastructure stack\n\n- [Storybook](https://storybook.js.org/) - Document and test UI Components\n- [Jest](https://jestjs.io/) - Javascript testing library\n- [React](https://react.dev/) - Javascript frontend development library\n- [Typescript](https://www.typescriptlang.org/) - Superset of JS, provides static types\n- [Turbo Repo](https://turbo.build/repo) - Incremental bundler and build system\n- [pnpm](https://pnpm.io/) - Javascript package manager with support for workspaces\n- [Docker](https://docs.docker.com/) - Container-based deployment\n\n## Current features:\n\n- basic Nextjs app, uses \"pages\" router\n- typescript\n- drupal-next used to integrate with Drupal\n- antd with SSR css file generation\n- custom theme for antd\n- storybook\n- jest tests\n- makefile shortcuts\n\n## Architecture\n\n### The Base UI library\n\nThe `packages/base` folder has the base library\n\nWe follow an Atomic Design approach. See this article for a [short overview of Atomic Design](https://blog.logrocket.com/atomic-design-react-native/)\n\nWe use the following structure to host our components:\n\n- `atoms`: we don't have yet any\n- `molecules` - basic components\n- `blocks` - Recipes for bigger components\n- `global` - Site-wide recipes. Such as basic layout, footer, header, etc.\n- `templates` - Full pages and layouts\n\n# TODO:\n\n- improve Dockerfile, see https://github.com/ReeceRose/next.js-template/tree/main\n- See https://levelup.gitconnected.com/how-to-make-your-library-tree-shakable-20b5a446c1e2 to package the library and https://github.com/egoist/tsup\n- See https://github.com/vercel/turbo/blob/main/examples/kitchen-sink/packages/eslint-config-custom/next.js\n\n- https://typescript-eslint.io/blog/parser-options-project-true/\n- https://github.com/antfu/eslint-config\n- https://dotfyle.com/\n- https://github.com/vercel/platforms/blob/main/app/app/\n- https://github.com/haydenbleasel/next-forge/tree/main\n- https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module\n- https://www.drupal.org/project/api_client\n- https://git.drupalcode.org/project/api_client/-/blob/canary/packages/json-api-client/src/JsonApiClient.ts?ref_type=heads\n- https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/\nhttps://dev.to/gvergnaud/bringing-pattern-matching-to-typescript-introducing-ts-pattern-v3-0-o1k\n\n## jq filters\n\n- Select a country from a facet\n\n```\njq '.meta.facets[] | objects | select(.id == \"jsonapi_country\").terms[] | select(.values.value == \"180\")'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feaudeweb%2Fnext-drupal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feaudeweb%2Fnext-drupal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feaudeweb%2Fnext-drupal/lists"}