{"id":21815329,"url":"https://github.com/codingbeautydev/nextjs-current-url","last_synced_at":"2025-04-14T00:41:29.838Z","repository":{"id":176558595,"uuid":"658459388","full_name":"codingbeautydev/nextjs-current-url","owner":"codingbeautydev","description":"JavaScript library to easily get the current URL or route in Next.js","archived":false,"fork":false,"pushed_at":"2023-09-16T21:46:25.000Z","size":378,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T14:52:34.698Z","etag":null,"topics":["javascript","next","next-current-url","nextjs","nextjs-current-url","nextjs13","npm","typescript","url","utility"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/nextjs-current-url","language":"TypeScript","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/codingbeautydev.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}},"created_at":"2023-06-25T19:59:06.000Z","updated_at":"2024-10-03T15:17:08.000Z","dependencies_parsed_at":"2023-07-06T21:46:35.902Z","dependency_job_id":null,"html_url":"https://github.com/codingbeautydev/nextjs-current-url","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"e653c78f547b79f6a886420211657a6a7d613480"},"previous_names":["tariibaba/nextjs-current-url"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingbeautydev%2Fnextjs-current-url","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingbeautydev%2Fnextjs-current-url/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingbeautydev%2Fnextjs-current-url/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingbeautydev%2Fnextjs-current-url/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codingbeautydev","download_url":"https://codeload.github.com/codingbeautydev/nextjs-current-url/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804537,"owners_count":21164125,"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":["javascript","next","next-current-url","nextjs","nextjs-current-url","nextjs13","npm","typescript","url","utility"],"created_at":"2024-11-27T15:17:43.260Z","updated_at":"2025-04-14T00:41:29.807Z","avatar_url":"https://github.com/codingbeautydev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nextjs-current-url\n\nQuickly get the current URL or route in Next.js client \u0026 server environments ✨\n\n## Usage\n\n### Next.js client component\n\n`nextjs-current-url` has a `useUrl` hook that quickly gives you the current URL in a browser-rendered component.\nIt returns a [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.\n`URL` let's you easily access specific parts of the URL.\n`useUrl` works in both pages and app router.\n\nExample:\n\n```ts\nimport { useUrl } from 'nextjs-current-url';\nimport Head from 'next/head';\n\nexport default function Home() {\n  // 👇 useUrl() returns `null` until hydration, so plan for that with `??`\n  const { href: currentUrl, pathname } = useUrl() ?? {};\n\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003eNext.js - Coding Beauty\u003c/title\u003e\n        \u003cmeta name=\"description\" content=\"Next.js Tutorials by Coding Beauty\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n        \u003clink rel=\"icon\" href=\"/favicon.png\" /\u003e\n      \u003c/Head\u003e\n      \u003cmain\u003e\n        Welcome to Coding Beauty 😄\n        \u003cbr /\u003e\n        \u003cbr /\u003e\n        URL: \u003cb\u003e{currentUrl}\u003c/b\u003e\n        \u003cbr /\u003e\n        pathname: \u003cb\u003e{pathname}\u003c/b\u003e\n      \u003c/main\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nResult:\n![](media/clientcomponent.webp)\n\n### getServerSideProps()\n\nTo use `nextjs-current-url` in `getServerSideProps`, call the `getUrl` function, passing the context object's `req` property.\n\nExample:\n\n```ts\nimport { NextPageContext } from 'next';\nimport Head from 'next/head';\nimport { getUrl } from 'nextjs-current-url/server';\n\nexport function getServerSideProps(context: NextPageContext) {\n  const url = getUrl({ req: context.req });\n  return {\n    props: {\n      url: url.href,\n    },\n  };\n}\n\nexport default function Home({ url }: { url: string }) {\n  const urlObj = new URL(url);\n  const { pathname } = urlObj;\n\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003eNext.js - Coding Beauty\u003c/title\u003e\n        \u003cmeta name=\"description\" content=\"Generated by create next app\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n        \u003clink rel=\"icon\" href=\"/favicon.png\" /\u003e\n      \u003c/Head\u003e\n      \u003cmain\u003e\n        Welcome to Coding Beauty 😃\n        \u003cbr /\u003e\n        \u003cbr /\u003e\n        URL: \u003cb\u003e{url}\u003c/b\u003e\n        \u003cbr /\u003e\n        Route: \u003cb\u003e{pathname}\u003c/b\u003e\n      \u003c/main\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nResult:\n![](media/getserversideprops.webp)\n\n### Next.js middleware\n\n`next-js-current-url` also works in Next.js middleware files.\nCall `getUrl` and pass the `NextRequest` object in the middleware function.\n\n`src/middleware.ts`\n\n```ts\nimport { NextResponse } from 'next/server';\nimport type { NextRequest } from 'next/server';\nimport { getUrl } from 'nextjs-current-url/server';\nimport { getSession } from '@/lib/session';\n\nexport async function middleware(request: NextRequest) {\n  const { href, orgin } = getUrl({ req: request });\n  const session = await getSession(request);\n  if (!href.startsWith('/signin') \u0026\u0026 !session.user) {\n    const signinUrl = new URL('/signin', origin);\n    signinUrl.searchParams.set('continue', href);\n    return NextResponse.redirect(signinUrl);\n  }\n}\n\nexport const config = {\n  matcher: '/app/:path*',\n};\n```\n\n![](media/middleware.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingbeautydev%2Fnextjs-current-url","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingbeautydev%2Fnextjs-current-url","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingbeautydev%2Fnextjs-current-url/lists"}