next-url-parent

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~