{"id":13423770,"url":"https://github.com/fridays/next-routes","last_synced_at":"2025-05-14T02:07:32.527Z","repository":{"id":38290608,"uuid":"80420675","full_name":"fridays/next-routes","owner":"fridays","description":"Universal dynamic routes for Next.js","archived":false,"fork":false,"pushed_at":"2024-08-06T05:50:49.000Z","size":706,"stargazers_count":2470,"open_issues_count":2,"forks_count":231,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-09T12:19:11.915Z","etag":null,"topics":["nextjs","node","react","router","routes","routing","server-rendering","ssr","universal"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/fridays.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-01-30T12:44:41.000Z","updated_at":"2025-04-13T17:37:24.000Z","dependencies_parsed_at":"2022-07-12T02:02:17.706Z","dependency_job_id":"953120f8-11d0-40bc-b34e-060a2b5d64b8","html_url":"https://github.com/fridays/next-routes","commit_stats":{"total_commits":209,"total_committers":18,"mean_commits":11.61111111111111,"dds":"0.15311004784688997","last_synced_commit":"3b718c995dca801dc7011409a30e3cbf68ed1073"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fridays%2Fnext-routes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fridays%2Fnext-routes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fridays%2Fnext-routes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fridays%2Fnext-routes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fridays","download_url":"https://codeload.github.com/fridays/next-routes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253411904,"owners_count":21904205,"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":["nextjs","node","react","router","routes","routing","server-rendering","ssr","universal"],"created_at":"2024-07-31T00:00:42.049Z","updated_at":"2025-05-14T02:07:27.506Z","avatar_url":"https://github.com/fridays.png","language":"JavaScript","funding_links":[],"categories":["Extensions","JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Dynamic Routes for Next.js\n\n[![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js\u0026type=6\u0026v=1.4.2\u0026x2=0)](https://www.npmjs.com/package/next-routes) [![Coverage Status](https://coveralls.io/repos/github/fridays/next-routes/badge.svg)](https://coveralls.io/github/fridays/next-routes) [![Build Status](https://travis-ci.org/fridays/next-routes.svg?branch=master)](https://travis-ci.org/fridays/next-routes)\n\n\u003e **_Deprecation Notice: This package was a popular choice in the early years of Next.js and is no longer maintained. Please check the Next.js docs for its current ways of routing._**\n\nEasy to use universal dynamic routes for [Next.js](https://github.com/zeit/next.js)\n\n- Express-style route and parameters matching\n- Request handler middleware for express \u0026 co\n- `Link` and `Router` that generate URLs by route definition\n\n## How to use\n\nInstall:\n\n```bash\nnpm install next-routes --save\n```\n\nCreate `routes.js` inside your project:\n\n```javascript\nconst routes = require('next-routes')\n\n// Name   Page      Pattern\nmodule.exports = routes() // ----   ----      -----\n  .add('about') // about  about     /about\n  .add('blog', '/blog/:slug') // blog   blog      /blog/:slug\n  .add('user', '/user/:id', 'profile') // user   profile   /user/:id\n  .add('/:noname/:lang(en|es)/:wow+', 'complex') // (none) complex   /:noname/:lang(en|es)/:wow+\n  .add({name: 'beta', pattern: '/v3', page: 'v3'}) // beta   v3        /v3\n```\n\nThis file is used both on the server and the client.\n\nAPI:\n\n- `routes.add([name], pattern = /name, page = name)`\n- `routes.add(object)`\n\nArguments:\n\n- `name` - Route name\n- `pattern` - Route pattern (like express, see [path-to-regexp](https://github.com/pillarjs/path-to-regexp))\n- `page` - Page inside `./pages` to be rendered\n\nThe page component receives the matched URL parameters merged into `query`\n\n```javascript\nexport default class Blog extends React.Component {\n  static async getInitialProps({query}) {\n    // query.slug\n  }\n  render() {\n    // this.props.url.query.slug\n  }\n}\n```\n\n## On the server\n\n```javascript\n// server.js\nconst next = require('next')\nconst routes = require('./routes')\nconst app = next({dev: process.env.NODE_ENV !== 'production'})\nconst handler = routes.getRequestHandler(app)\n\n// With express\nconst express = require('express')\napp.prepare().then(() =\u003e {\n  express().use(handler).listen(3000)\n})\n\n// Without express\nconst {createServer} = require('http')\napp.prepare().then(() =\u003e {\n  createServer(handler).listen(3000)\n})\n```\n\nOptionally you can pass a custom handler, for example:\n\n```javascript\nconst handler = routes.getRequestHandler(app, ({req, res, route, query}) =\u003e {\n  app.render(req, res, route.page, query)\n})\n```\n\nMake sure to use `server.js` in your `package.json` scripts:\n\n```json\n\"scripts\": {\n  \"dev\": \"node server.js\",\n  \"build\": \"next build\",\n  \"start\": \"NODE_ENV=production node server.js\"\n}\n```\n\n## On the client\n\nImport `Link` and `Router` from your `routes.js` file to generate URLs based on route definition:\n\n### `Link` example\n\n```jsx\n// pages/index.js\nimport {Link} from '../routes'\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv\u003eWelcome to Next.js!\u003c/div\u003e\n    \u003cLink route=\"blog\" params={{slug: 'hello-world'}}\u003e\n      \u003ca\u003eHello world\u003c/a\u003e\n    \u003c/Link\u003e\n    or\n    \u003cLink route=\"/blog/hello-world\"\u003e\n      \u003ca\u003eHello world\u003c/a\u003e\n    \u003c/Link\u003e\n  \u003c/div\u003e\n)\n```\n\nAPI:\n\n- `\u003cLink route='name'\u003e...\u003c/Link\u003e`\n- `\u003cLink route='name' params={params}\u003e ... \u003c/Link\u003e`\n- `\u003cLink route='/path/to/match'\u003e ... \u003c/Link\u003e`\n\nProps:\n\n- `route` - Route name or URL to match (alias: `to`)\n- `params` - Optional parameters for named routes\n\nIt generates the URLs for `href` and `as` and renders `next/link`. Other props like `prefetch` will work as well.\n\n### `Router` example\n\n```jsx\n// pages/blog.js\nimport React from 'react'\nimport {Router} from '../routes'\n\nexport default class Blog extends React.Component {\n  handleClick() {\n    // With route name and params\n    Router.pushRoute('blog', {slug: 'hello-world'})\n    // With route URL\n    Router.pushRoute('/blog/hello-world')\n  }\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cdiv\u003e{this.props.url.query.slug}\u003c/div\u003e\n        \u003cbutton onClick={this.handleClick}\u003eHome\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nAPI:\n\n- `Router.pushRoute(route)`\n- `Router.pushRoute(route, params)`\n- `Router.pushRoute(route, params, options)`\n\nArguments:\n\n- `route` - Route name or URL to match\n- `params` - Optional parameters for named routes\n- `options` - Passed to Next.js\n\nThe same works with `.replaceRoute()` and `.prefetchRoute()`\n\nIt generates the URLs and calls `next/router`\n\n---\n\nOptionally you can provide custom `Link` and `Router` objects, for example:\n\n```javascript\nconst routes = module.exports = require('next-routes')({\n  Link: require('./my/link')\n  Router: require('./my/router')\n})\n```\n\n---\n\n##### Related links\n\n- [zeit/next.js](https://github.com/zeit/next.js) - Framework for server-rendered React applications\n- [path-to-regexp](https://github.com/pillarjs/path-to-regexp) - Express-style path to regexp\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffridays%2Fnext-routes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffridays%2Fnext-routes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffridays%2Fnext-routes/lists"}