{"id":19112390,"url":"https://github.com/actionhero/ah-next-plugin","last_synced_at":"2025-04-30T22:13:28.565Z","repository":{"id":39097355,"uuid":"230319670","full_name":"actionhero/ah-next-plugin","owner":"actionhero","description":"For booting a Next.JS React application inside of Actionhero","archived":false,"fork":false,"pushed_at":"2024-11-01T12:22:27.000Z","size":2003,"stargazers_count":5,"open_issues_count":11,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-14T13:11:06.131Z","etag":null,"topics":["actionhero","nextjs","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/actionhero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["evantahler"]}},"created_at":"2019-12-26T19:46:57.000Z","updated_at":"2024-08-01T15:26:15.000Z","dependencies_parsed_at":"2023-02-17T08:05:44.677Z","dependency_job_id":"a8d4c6d1-7d0b-451b-bce7-acc0ffc855bc","html_url":"https://github.com/actionhero/ah-next-plugin","commit_stats":{"total_commits":416,"total_committers":10,"mean_commits":41.6,"dds":"0.31490384615384615","last_synced_commit":"c086d1dc2cf7f7eb509061a54142f4d7fb774544"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionhero%2Fah-next-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionhero%2Fah-next-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionhero%2Fah-next-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionhero%2Fah-next-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actionhero","download_url":"https://codeload.github.com/actionhero/ah-next-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249565250,"owners_count":21292427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["actionhero","nextjs","react"],"created_at":"2024-11-09T04:32:58.259Z","updated_at":"2025-04-18T23:33:34.485Z","avatar_url":"https://github.com/actionhero.png","language":"JavaScript","funding_links":["https://github.com/sponsors/evantahler"],"categories":[],"sub_categories":[],"readme":"# AH-Next-Plugin\n\n[![CircleCI](https://circleci.com/gh/actionhero/ah-next-plugin.svg?style=svg)](https://circleci.com/gh/actionhero/ah-next-plugin)\n\nFor booting a Next.JS React application inside of Actionhero.\n\n## Why?\n\nActionhero is a great server framework. Next.js is a great react+frontend framework. If you wan to have one server to run both your API and HTML frontend, this project is for you?\n\n## How?\n\nThis project works by creating an action which, when requested by a client over HTTP, passes the connection over to Next for rendering. We use an Actionhero initializer to configure the routes and Next.js server.\n\n## Configuration\n\nYour project will likely be configured with an `api` and `web` directory at the top level. The `api` directory would be the Actionhero project, and `web` would be the next project. Since Actionhero and Next have different ways of transpiling typescript (Actionhero use `typescript` while Next.js uses `Babel` to handle `.tsx` files), it is important to have these 2 directories separate for the `build` step. This project's layout is a good example of this.\n\nThe `web` directory is a normal Next.JS project. No changes are needed.\n\nTo configure your Actionhero server to also run Next:\n\n1. Add this plugin to your actionhero project `npm install ah-next-plugin`. Ensure you also `npm install next react react-dom` and `npm install --save-dev @types/react-dom` as these are peer dependencies of this project.\n\n2. Include it in your `config/plugins.ts`.\n\n```ts\nimport { join } from \"path\";\n\nexport const DEFAULT = {\n  plugins: () =\u003e {\n    return {\n      \"ah-next-plugin\": {\n        path: join(\n          __dirname,\n          \"..\",\n          \"..\",\n          \"..\",\n          \"node_modules\",\n          \"ah-next-plugin\"\n        ),\n      },\n    };\n  },\n};\n```\n\n3. Change your default route in `config/servers/web.ts` to be \"api\" rather than \"file\" (we want to pass all file handling over to next)\n4. Change the location of `config.general.paths.public` (in `config/servers/api.ts`) to the public directory in your next.js project. Be sure to make this an array with one entry, for example: `[path.join(process.cwd(), \"..\", \"web\", \"public\")]`)\n5. Create a new `config.general.paths.next` (in `config/servers/api.ts`) to the location of your next.js project. Be sure to make this an array with one entry, for example: `[path.join(process.cwd(), \"..\", \"web\")]`) - note that it should be an array.\n6. Create a new config file for next:\n\n```ts\n// from src/config/next.ts\n// learn more about the next.js app options here https://nextjs.org/docs/advanced-features/custom-server\n\nconst namespace = \"next\";\n\ndeclare module \"actionhero\" {\n  export interface ActionheroConfigInterface {\n    [namespace]: ReturnType\u003ctypeof DEFAULT[typeof namespace]\u003e;\n  }\n}\n\nconst env = process.env.NODE_ENV ? process.env.NODE_ENV : \"development\";\n\nexport const DEFAULT = {\n  [namespace]: () =\u003e {\n    return {\n      enabled: true,\n      dev: process.env.NEXT_DEVELOPMENT_MODE\n        ? process.env.NEXT_DEVELOPMENT_MODE === \"false\"\n          ? false\n          : true\n        : env === \"development\",\n      quiet: false,\n    };\n  },\n};\n```\n\nLearn more about the next.js app options here https://nextjs.org/docs/advanced-features/custom-server.\n\nThat's it! Now if you visit the root URL of your Actionhero project, you will see Next rendering the contents of `pages/index.ts`!\n\n## Deployment\n\nIn the `build` step of your project, be sure to also compile the next.js project. An example of the scripts from a `package.json`, which is uses yarn to test, lint, build, and run a project like this is below:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"npm run build-api \u0026\u0026 npm run build-web\",\n    \"build-api\": \"cd api \u0026\u0026 rm -rf dist \u0026\u0026 tsc --declaration\",\n    \"build-web\": \"cd web \u0026\u0026 next build\",\n    \"start\": \"cd api \u0026\u0026 ./dist/server\",\n    \"dev\": \"cd api \u0026\u0026 ts-node-dev --transpile-only --ignore-watch=\\\"../web\\\" --no-deps --notify=false ./src/server\",\n    \"test\": \"npm run test-api \u0026\u0026 npm run test-web\",\n    \"pretest\": \"npm run lint \u0026\u0026 npm run build\",\n    \"test-api\": \"cd api \u0026\u0026 jest\",\n    \"test-web\": \"cd web \u0026\u0026 jest\",\n    \"lint\": \"npm run lint-api \u0026\u0026 npm run lint-web\",\n    \"lint-api\": \"cd api \u0026\u0026 prettier --check src/**/*.ts __tests__/**/*.ts\",\n    \"lint-web\": \"cd web \u0026\u0026 prettier --check pages/**/*.tsx components/**/*.tsx __tests__/**/*.tsx\"\n  }\n}\n```\n\n# Dev command alternative\n\n`ts-node-dev` doesn't always play nice with next.js, leading to crashes after every change in `../web`.\nReplacing `ts-node-dev` with a combination of `nodemon` and `ts-node` (`npm install ts-node nodemon --save-dev`) should fix this issue with the following command:\n\n```json\n{\n  \"dev\": \"cd api \u0026\u0026 nodemon -e js,jsx,ts,tsx --signal SIGTERM --ignore dist --watch ./src --exec \\\"ts-node\\\" --transpile-only --log-error ./src/server\"\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionhero%2Fah-next-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factionhero%2Fah-next-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionhero%2Fah-next-plugin/lists"}