Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pablopunk/nextjs-redirect
HOC to redirect to any URL in NextJS both in client and server
https://github.com/pablopunk/nextjs-redirect
dynamic hacktoberfest hoc nextjs redirect
Last synced: about 2 months ago
JSON representation
HOC to redirect to any URL in NextJS both in client and server
- Host: GitHub
- URL: https://github.com/pablopunk/nextjs-redirect
- Owner: pablopunk
- License: mit
- Created: 2019-06-04T14:13:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-27T14:34:20.000Z (8 months ago)
- Last Synced: 2024-10-03T07:06:26.960Z (2 months ago)
- Topics: dynamic, hacktoberfest, hoc, nextjs, redirect
- Language: JavaScript
- Homepage: https://pablopunk.github.io/nextjs-redirect/
- Size: 1.3 MB
- Stars: 148
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-NextJs - nextjs-redirect - [website](https://pablopunk.github.io/nextjs-redirect/) (Nextjs Plugins)
README
# nextjs-redirect
Redirect to any URL in NextJS both in client and server
## Install
```sh
npm install nextjs-redirect
```
## Usage
Let's say you want to create a page `/donate` that redirects the user to paypal.me with a default value for the money. You create the page as you always do in NextJS (`pages/donate.js`) and then just use this component with the URL you want:
```js
// pages/donate.js
import redirect from 'nextjs-redirect'
export default redirect('https://paypal.me/pablopunk/5')
```
You can checkout this example live in [pablopunk.com](https://pablopunk.com)
### Status code (301, 302...)
By default, it will send a [301 status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#3xx_Redirection). This can be customized by an optional parameter:
```js
redirect('https://google.es', { statusCode: 302 })
```
### Client side dynamic routes (as)
When redirecting on the client side, if the redirected page is dynamic (`pages/user/[userId]/info.js`), the following redirect will trigger a page refresh:
```js
redirect('/user/42/info')
```
In this case you can use the `asUrl` option to make a smooth transition between pages without any refresh:
```js
redirect('/user/[userId]/info', { asUrl: '/user/42/info' })
```
### Static export
This package is compatible with `next export` since version 4.0.0. See [PR #4](https://github.com/pablopunk/nextjs-redirect/pull/4) for more details.
### Custom UI component (HOC)
In case the navigation is happening client-side, you can use this package as a HOC to provide your custom components/styles for the UI:
```jsx
import redirect from 'nextjs-redirect'
const Redirect = redirect('https://github.com/pablopunk')
export default () => (
Redirecting to github!
)
```
### Redirect to URL from parameters
Let's say you have a single page called `/redirect`, and you wanna use it for all kinds of redirects:
* `/redirect?to=https://google.com`
* `/redirect?next=https://twitter.com`
* `/redirect?url=https://pablopunk.com`
Pretty cool huh!? You can do this with `nextjs-redirect` by passing the name of the parameter you want on the url. For the examples above:
```ts
// NOTE: These are 3 separate examples, you can only choose one name per page
redirect('to', {params: true})
redirect('next', {params: true})
redirect('url', {params: true})
```
## Related
Working with locales routes? Take a look at [nextjs-redirect-locale](https://github.com/pablopunk/nextjs-redirect-locale).
## Native redirects
There's now a native way of handling redirects on NextJS. You can read more about it [here](https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers). It requires you to modify your `next.config.js`. Personally I still think `nextjs-redirect` is a more friendly way of doing it, and also more flexible. For example you can do dynamic redirects on the server, depeding on the request, which is useful when working with locales (checkout [nextjs-redirect-locale](https://github.com/pablopunk/nextjs-redirect-locale)) and other request-dependent redirects. It also allows you make client redirects with a custom layout.
## License
MIT
## Author
|  |
| ---------------------------------------------------------------------------- |
| [Pablo Varela](https://pablopunk.com) |