{"id":16907869,"url":"https://github.com/timc1/with-route-as-modal","last_synced_at":"2026-05-07T09:33:45.506Z","repository":{"id":98606310,"uuid":"288317786","full_name":"timc1/with-route-as-modal","owner":"timc1","description":null,"archived":false,"fork":false,"pushed_at":"2020-08-18T00:42:49.000Z","size":3,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-28T04:24:47.860Z","etag":null,"topics":[],"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/timc1.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":"2020-08-18T00:42:39.000Z","updated_at":"2020-11-08T14:17:09.000Z","dependencies_parsed_at":"2023-10-04T02:36:12.346Z","dependency_job_id":null,"html_url":"https://github.com/timc1/with-route-as-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/timc1/with-route-as-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fwith-route-as-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fwith-route-as-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fwith-route-as-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fwith-route-as-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timc1","download_url":"https://codeload.github.com/timc1/with-route-as-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fwith-route-as-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32731512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":"2024-10-13T18:49:10.661Z","updated_at":"2026-05-07T09:33:45.488Z","avatar_url":"https://github.com/timc1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# with-route-as-modal\n\nOn many popular social media, opening a post will update the URL but won't trigger a navigation and will instead display the content inside a modal. This behavior ensures the user won't lose the current UI context (scroll position). The URL still reflect the post's actual page location and any refresh will bring the user there. This behavior ensures great UX without neglecting SEO.\n\nThis example shows how to conditionally display a modal based on a route.\n\n## Deploy your own\n\nDeploy the example using [Vercel](https://vercel.com):\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal)\n\n## How to use\n\n### Using `create-next-app`\n\nExecute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:\n\n```bash\nnpx create-next-app --example with-route-as-modal with-route-as-modal-app\n# or\nyarn create next-app --example with-route-as-modal with-route-as-modal-app\n```\n\n### Download manually\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-route-as-modal\ncd with-route-as-modal\n```\n\nInstall it and run:\n\n```bash\nnpm install\nnpm run dev\n# or\nyarn\nyarn dev\n```\n\nDeploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js\u0026utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimc1%2Fwith-route-as-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimc1%2Fwith-route-as-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimc1%2Fwith-route-as-modal/lists"}