{"id":13679954,"url":"https://github.com/gvergnaud/nextjs-dynamic-routes","last_synced_at":"2025-09-30T03:31:00.397Z","repository":{"id":56353659,"uuid":"82308028","full_name":"gvergnaud/nextjs-dynamic-routes","owner":"gvergnaud","description":"[Deprecated] Super simple way to create dynamic routes with Next.js","archived":true,"fork":false,"pushed_at":"2020-11-27T18:04:13.000Z","size":508,"stargazers_count":140,"open_issues_count":5,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-15T23:25:19.029Z","etag":null,"topics":["dynamic-routes","isomorphic","next","nextjs","router","routing","url-parameters"],"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/gvergnaud.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}},"created_at":"2017-02-17T15:02:20.000Z","updated_at":"2024-01-20T15:05:40.000Z","dependencies_parsed_at":"2022-08-15T17:10:37.468Z","dependency_job_id":null,"html_url":"https://github.com/gvergnaud/nextjs-dynamic-routes","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvergnaud%2Fnextjs-dynamic-routes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvergnaud%2Fnextjs-dynamic-routes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvergnaud%2Fnextjs-dynamic-routes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvergnaud%2Fnextjs-dynamic-routes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gvergnaud","download_url":"https://codeload.github.com/gvergnaud/nextjs-dynamic-routes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234695707,"owners_count":18873020,"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":["dynamic-routes","isomorphic","next","nextjs","router","routing","url-parameters"],"created_at":"2024-08-02T13:01:11.397Z","updated_at":"2025-09-30T03:30:55.080Z","avatar_url":"https://github.com/gvergnaud.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Next.js Dynamic Routes\n\n## /!\\ Deprecated, please don't use\n\nDynamic routes are now natively supported on Nextjs v9 and higher. This package will stay around on npm, but it is now unmaintained and there will be no new releases.\n\n----------\n\nA dynamic routing solution for the awesome [Next.js](https://github.com/zeit/next.js)\nframework.\n\n## Why ?\n\nNext.js introduced in it's V2 a programmatic routing API allowing you to serve your\nNext app from, for example, an express server:\n\n```js\n// yourServer.js\nserver.get('/user/:id', (req, res) =\u003e {\n  return app.render(req, res, '/user', req.params)\n})\n```\n```jsx\n// ./pages/index.js\n\u003cLink href={`/user?id={id}`} as={`/user/${id}`}\u003e\u003ca\u003eVisit me!\u003c/a\u003e\u003c/Link\u003e\n```\n\nBut as the number of pages grows, it's getting a little hard to manage...\n\n## Introducing Dynamic Routes\n\n```\nnpm install --save nextjs-dynamic-routes\n```\n\n### Setup your routes\nCreate a `routes.js` file and list all your **Dynamic** routes.\nYou don't have to list your regular routes, as Next.js will handle them as usual (but you can!).\n\n```js\nconst Router = require('nextjs-dynamic-routes')\n\nconst router = new Router()\n\nrouter.add({ name: 'character', pattern: '/characters/:id' })\n\nrouter.add({ name: 'film', pattern: '/films/:id' })\n\n// if the name of your route is different from your component file name:\nrouter.add({\n  name: 'characterAndFilm',\n  pattern: '/character-and-film/:characterId/:filmId',\n  page: '/character-and-film'\n})\n\nmodule.exports = router\n\n```\n\n### Setup your request handler\n```js\nconst express = require('express')\nconst next = require('next')\nconst Router = require('./routes')\n\nconst app = next({ dev: process.env.NODE_ENV !== 'production' })\nconst server = express()\nconst handle = Router.getRequestHandler(app)\n\napp.prepare()\n  .then(() =\u003e {\n    server.get('*', (req, res) =\u003e handle(req, res))\n    server.listen(3000)\n  })\n```\n\n### Use your routes\nThen Nextjs Dynamic Routes exports a `Link` component. It's just like `next/link`,\nbut it adds a `route` prop that let you refer to a route by its name.\n\n```jsx\n// pages/index.js\nimport React from 'react'\nimport { Link } from '../routes'\n\nexport default () =\u003e (\n  \u003cul\u003e\n    \u003cli\u003e\u003cLink route=\"character\" id=\"1\"\u003e\u003ca\u003eLuke Skywalker\u003c/a\u003e\u003c/Link\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cLink route=\"character\" id=\"2\"\u003e\u003ca\u003eC-3PO\u003c/a\u003e\u003c/Link\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cLink route=\"film\" id=\"1\"\u003e\u003ca\u003eA New Hope\u003c/a\u003e\u003c/Link\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cLink route=\"film\" id=\"2\"\u003e\u003ca\u003eThe Empire Strikes Back\u003c/a\u003e\u003c/Link\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003cLink route=\"characterAndFilm\" characterId=\"1\" filmId=\"2\"\u003e\n        \u003ca\u003eThe Empire Strikes Back and Luke Skywalker\u003c/a\u003e\n      \u003c/Link\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n)\n```\n\n```jsx\n// pages/character.js\nimport React from 'react'\n\nexport default class Character extends React.Component {\n  static async getInitialProps({ query }) {\n    return fetch(`//swapi.co/api/films/${query.id}`).then(x =\u003e x.json())\n  }\n\n  render() {\n    return \u003cp\u003e{this.props.name}\u003c/p\u003e\n  }\n}\n```\n\n## Prefetching data\nNext.js has this great feature allowing you to prefetch data for your next routes\nin the background.\n\nYou can benefit from that by simply putting a `prefetch` property on any Link :\n\n```jsx\n\u003cLink prefetch route=\"film\" id=\"2\"\u003e\u003ca\u003eThe Empire Strikes Back\u003c/a\u003e\u003c/Link\u003e\n```\n\n## Imperative API\n\n### Router.pushRoute(name, params [, options])\n```jsx\nimport Router from '../routes'\n\n\u003cbutton onClick={() =\u003e Router.pushRoute('film', { id: 2 })}\u003e\n  Go to film 2\n\u003c/button\u003e\n```\n\n### Router.replaceRoute(name, params [, options])\n```jsx\nimport Router from '../routes'\n\n\u003cbutton onClick={() =\u003e Router.replaceRoute('film', { id: 2 })}\u003e\n  Go to film 2\n\u003c/button\u003e\n```\n\n### Router.prefetchRoute(name, params)\n```jsx\nimport Router from '../routes'\n\n\u003cbutton onClick={() =\u003e Router.prefetchRoute('film', { id: 2 })}\u003e\n  Prefetch film 2\n\u003c/button\u003e\n```\n\n### Router.getRoutePath(name, params)\n```js\nimport Router from '../routes'\n\nconsole.log(Router.getRoutePath('characterAndFilm', { characterId: 2, filmId: 5 }))\n// =\u003e '/character-and-film/2/5'\n```\n\n## Query params\nThe Link component has a `queryParams` prop which you can fill with an object of regular query parameters.\n\n```jsx\n\u003cLink prefetch route=\"film\" id=\"2\" queryParams={{ utm_campaign: 'website' }}\u003e\n  \u003ca\u003eThe Empire Strikes Back\u003c/a\u003e\n\u003c/Link\u003e\n```\nThis will result in the following url: `/films/2?utm_campaign=website`.\n\nYou can use `queryParams` with the imperative API as well\n\n```js\n// It doesn't work only for pushRoute, but for all the other methods as well.\nRouter.pushRoute('film', {\n  id: 2,\n  queryParams: {\n    utm_campaign: 'website'\n  }\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvergnaud%2Fnextjs-dynamic-routes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgvergnaud%2Fnextjs-dynamic-routes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvergnaud%2Fnextjs-dynamic-routes/lists"}