next-url-parent

Project starts on 30-03-2024

Get the parent URL of the current URL in Next.js APP router.

📦 Requirements

• A Next.js project using app router.

🚀 Getting Started

Installation

npm install next-url-parent

Visit the npm page.

Setup package.json

Add the following code to package.json:

"scripts": {
 // other scripts ...
 "mup@gen": "next-url-parent"
 "mup@watch": "next-url-parent --watch"
 },

Read 💻 CLI for more details.

Usage 🎉

[!NOTE]
You must run the next-url-parent command once to get the function and hook working.

Function

import { getParentUrl } from "next-url-parent";

console.log(getParentUrl("https://example.com/parent/child"));
// -> "https://example.com/parent"

console.log(getParentUrl("https://example.com/parent/child?key1=value1&key2=value2", { 
  keepQueryString = true,
  queryStringWhitelist = ["key1"],
}));
// -> "https://example.com/parent?key1=value1"

console.log(getParentUrl("https://example.com/parent/child?key1=value1&key2=value2", { 
  keepQueryString = true,
  queryStringBlacklist = ["key1"],
}));
// -> "https://example.com/parent?key2=value2"

Options

| Option| Optional | Type| Default| Description| | --- | --- | --- | --- | --- | |url| :x: | string | | The child URL. | | keepQueryString | ✅ | boolean | false | Keep the child URL query string. | | queryStringWhitelist | ✅ | string[] | [] | Whitelist of query string keys. | | queryStringBlacklist | ✅ | string[] | [] | Blacklist of query string keys. |

Hook

import { useUrlParent } from "next-url-parent";

const MyPage = () => {
  const parentUrl = useUrlParent();

  // Default Options
  const parentUrl = useUrlParent(options: { 
    keepQueryString = false,
    queryStringWhitelist = [],
    queryStringBlacklist = [],
    defaultParentUrl = "",
  });

  return (
    <div>
      <h1>Parent URL: {parentUrl}</h1>
    </div>
  );
};

Options

| Option| Optional | Type| Default| Description| | --- | --- | --- | --- | --- | | keepQueryString | ✅ | boolean | false | Keep the child URL query string. | | queryStringWhitelist | ✅ | string[] | [] | Whitelist of query string keys. | | queryStringBlacklist | ✅ | string[] | [] | Blacklist of query string keys. | | defaultParentUrl | ✅ | string | "" | Default parent URL before the parent URL is resolved. |

💻 CLI

next-url-parent --appDir=./src/app --watch

Generate a path map.

| Option | Optional | Type | Default | Description | | ----------------- | -------- | --------- | ----------- | ---------------------------------------- | | --appDir / -i | ✅ | string | ./src/app | The directory of the Next.js app. | | --watch / -w | ✅ | boolean | false | Watch the files and obfuscate on change. |

⭐ TODO

• [ ] Tests

🐛 Known Issues

• \

🤝 Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details

☕ Donation

Love it? Consider a donation to support my work.

<- click me~