{"id":16853118,"url":"https://github.com/devxoul/next-route-map","last_synced_at":"2025-03-22T06:30:55.145Z","repository":{"id":141534650,"uuid":"442828997","full_name":"devxoul/next-route-map","owner":"devxoul","description":"🚏 Routes for Next.js","archived":false,"fork":false,"pushed_at":"2022-09-19T12:01:59.000Z","size":126,"stargazers_count":26,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-14T12:19:11.827Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devxoul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-12-29T16:28:56.000Z","updated_at":"2024-06-27T09:34:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"76a83eb6-7ef1-4af0-a9e9-4a5693cd15a7","html_url":"https://github.com/devxoul/next-route-map","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"cbfbbe330d6e77216e25fd3ede330cd884c8b5ef"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devxoul%2Fnext-route-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devxoul%2Fnext-route-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devxoul%2Fnext-route-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devxoul%2Fnext-route-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devxoul","download_url":"https://codeload.github.com/devxoul/next-route-map/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244918500,"owners_count":20531682,"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":[],"created_at":"2024-10-13T13:49:47.444Z","updated_at":"2025-03-22T06:30:55.130Z","avatar_url":"https://github.com/devxoul.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-route-map 🚏\n\n[![npm version](https://badge.fury.io/js/next-route-map.svg)](https://www.npmjs.com/package/next-route-map)\n[![CI](https://github.com/devxoul/next-route-map/workflows/CI/badge.svg)](https://github.com/devxoul/next-route-map/actions/workflows/ci.yml)\n\nnext-route-map allows you to define a route map. It automatically generates page modules that forward original modules in build time. **Focus on domain, not foldering.**\n\n\u003cimg src=\"https://user-images.githubusercontent.com/931655/147760569-f030eab9-0ed1-4dbf-b548-c81985b3246a.png\" alt=\"cover\"\u003e\n\n## Background\n\n[Next.js](https://nextjs.org/) provides a consistent way to structure and organize pages. It is very intuitive and easy to use. However, when it comes to a larger application with many business domains, the file system based routing can cause several problems.\n\nFirst, since it is strongly coupled to the file system, a file name can only represent a piece of url path rather than what it actually does. The larger application becomes the file names should be easier to understand. For example, `DashboardPage.tsx` is much easier to understand than `pages/index.tsx`. `UserSearchPage.tsx` is better than `pages/users.tsx`.\n\nSecond, `pages/` directory can only contain page modules so you have to place related modules such as components and hooks in other directory. It means that your project will have two directory trees: one starting from `pages/` and the other starting from `src/`. Same domain files are better to be in the same folder. For example, the second one is more organized that the first one.\n\n```\npages/\n  products/\n    [id].tsx\nproducts/\n  components/\n    Thumbnail.tsx\n```\n\n```\nproducts/\n  ProductDetailPage.tsx\n  components/\n    Thumbnail.tsx\n```\n\n## At a glance\n\nWith **next-route-map** you can separate the page modules from routing. It automatically generates page modules from routing file.\n\n**Before 🤔**\n\n```\npages/\n  index.tsx\n  products/\n    index.tsx\n    [id].tsx\n  orders/\n    index.tsx\n    [id].tsx\nproducts/\n  components/\n    Thumbnail.tsx\norders/\n  hooks/\n    usePlaceOrder.ts\n```\n\n**After 😊**\n\n```\nhome/\n  HomePage.tsx\nproducts/\n  ProductListPage.tsx\n  ProductDetailPage.tsx\n  components/\n    Thumbnail.tsx\norders/\n  OrderListPage.tsx\n  OrderDetailPage.tsx\n  hooks/\n    usePlaceOrder.tsx\n\n(auto generated)\npages/\n  index.tsx --\u003e home/HomePage.tsx\n  products/\n    index.tsx --\u003e products/ProductListPage.tsx\n    [id].tsx --\u003e products/ProductDetailPage.tsx\n  orders/\n    index.tsx --\u003e orders/OrderListPage.tsx\n    [id].tsx --\u003e orders/OrderDetailPage.tsx\n```\n\n## How it works\n\n**next-route-map** finds all page modules from the project and creates corresponding forwarding modules in the page directory. The forwarding modules look like:\n\n```ts\nexport { default } from '../src/products/ProductDetailPage'\n```\n\nWhen the page module contains magic functions like `getStaticProps` or `getServerSideProps` it will automatically export them as well.\n\n```ts\nexport { default, getServerSideProps } from '../src/products/ProductDetailPage'\n```\n\n## Getting started\n\n1. Add **`routes.config.js`** file to your project. See the [Options](#options) for detail API usage.\n\n    ```js\n    module.exports = {\n      pagesDir: './pages',\n      routes: {\n        '/': './src/home/HomePage.tsx',\n        '/products': './src/products/ProductListPage.tsx',\n        '/products/[id]': './src/products/ProductDetailPage.tsx',\n        '/orders': './src/orders/OrderListPage.tsx',\n        '/orders/[id]': './src/orders/OrderDetailPage.tsx',\n        '/404': './src/errors/404.tsx',\n      },\n      preservePaths: [\n        '_app.tsx',\n        '_document.tsx',\n      ],\n      logger: console,\n    }\n    ```\n\n2. Add `next-route-map` command to your **`package.json`**.\n\n    ```diff\n      \"scripts\": {\n    -   \"dev\": \"next dev\",\n    -   \"build\": \"next build\",\n    +   \"dev\": \"next-route-map \u0026\u0026 next dev\",\n    +   \"build\": \"next-route-map \u0026\u0026 next build\",\n        \"start\": \"next start\",\n        \"lint\": \"next lint\"\n      },\n    ```\n\n3. Then the plugin will generate the proper page modules on `$ yarn build` or `$ yarn dev`.\n\n    * `./pages/index.ts`\n    * `./pages/products/index.ts`\n    * `./pages/products/[id].ts`\n    * `./pages/orders/index.ts`\n    * `./pages/orders/[id].ts`\n    * `./pages/404.ts`\n\n    It is safe to add the pages directory to **`.gitignore`**.\n\n    ```gitignore\n    /pages/*\n    !/pages/_app.tsx\n    !/pages/_document.tsx\n    ```\n\n## Options\n\n#### baseDir\n\nA Next.js project directory. Use this option if your Next.js application is located in somewhere else. Defaults to `cwd`.\n\n#### pagesDir\n\nA directory to generate pages. This value may be `./pages` or `./src/pages`.\n\n#### routes\n\nA route map for url paths and page file paths.\n\nFor example:\n\n```js\n{\n  '/': './src/home/HomePage.tsx',\n  '/products': './src/products/ProductListPage.tsx',\n  '/products/[id]': './src/products/ProductDetailPage.tsx',\n  '/orders': './src/orders/OrderListPage.tsx',\n  '/orders/[id]': './src/orders/OrderDetailPage.tsx',\n  '/404': './src/errors/404.tsx',\n}\n```\n\n#### preservePaths\n\nPaths to preserve on clean. Use this option if there is a non-forwarding module in the pages directory. The paths are relative to pages directory.\n\nFor example:\n\n```js\n['_app.tsx', '_document.tsx']\n```\n\nNote that this option does not guarantee that the path is not ignored from `.gitignore`. If you makde the pages directory be ignored, you need to explicitly add a rule.\n\n```diff\n  # next.js\n  /pages/*\n+ !/pages/_app.tsx\n+ !/pages/_document.tsx\n```\n\n#### logger\n\nIf you want log build output, use `console`.\n\n## Installation\n\n* Using [**Yarn**](https://yarnpkg.com/):\n    ```console\n    $ yarn add next-route-map --dev\n    ```\n* Using [**npm**](https://www.npmjs.com/):\n    ```console\n    $ npm install next-route-map --save-dev\n    ```\n\n## License\n\nreact-route-map is under MIT license. See the [LICENSE] file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevxoul%2Fnext-route-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevxoul%2Fnext-route-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevxoul%2Fnext-route-map/lists"}