npmpackage.info

Gathering detailed insights and metrics for nextjs-redirect

Other packages similar to nextjs-redirect

is-redirect

2.0.0

Check if a number is a redirect HTTP status code

@sentry/nextjs

8.41.0

Official Sentry SDK for Next.js

15.0.3

The React Framework

@hashicorp/netlify-to-nextjs-redirect-exporter

0.0.6

Convert Netlify redirects rules into Next.js-compatible redirect/rewrite rules

Gathering detailed insights and metrics for nextjs-redirect

nextjs-redirect

HOC to redirect to any URL in NextJS both in client and server

6.0.1

148

MIT

JavaScript

1,207,495 2.5

Installations

npm install nextjs-redirect

Pull Requests

Open

1

Total

22

Closed

2

Merged

19

Issues

Open

0

Total

6

Closed

6

Releases

Unable to fetch releases

Developer

pablopunk

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

14.19.2

NPM Version

6.14.17 Statistics

148 Stars

130 Commits

10 Forks

2 Watching

2 Branches

2 Contributors

Updated on 31 May 2024

Languages

JavaScript (53.13%)

TypeScript (38.26%)

HTML (8.61%)

Total Downloads

Cumulative downloads

Total Downloads

1,207,495

Last day

4.5%

2,364

Compared to previous day

Last week

12.6%

11,146

Compared to previous week

Last month

0.3%

35,929

Compared to previous month

Last year

9.6%

310,552

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

next react

Dev Dependencies

@types/cypress @types/node @types/react cypress dts-bundle-generator husky next nodemon prettier pretty-quick react start-server-and-test sucrase

Versions

nextjs-redirect

Redirect to any URL in NextJS both in client and server

Install

1npm 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:

1// pages/donate.js
2import redirect from 'nextjs-redirect'
3export default redirect('https://paypal.me/pablopunk/5')

You can checkout this example live in pablopunk.com

Status code (301, 302...)

By default, it will send a 301 status code. This can be customized by an optional parameter:

1redirect('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:

1redirect('/user/42/info')

In this case you can use the asUrl option to make a smooth transition between pages without any refresh:

1redirect('/user/[userId]/info', { asUrl: '/user/42/info' })

Static export

This package is compatible with next export since version 4.0.0. See PR #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:

1import redirect from 'nextjs-redirect'
2
3const Redirect = redirect('https://github.com/pablopunk')
4
5export default () => (
6  <Redirect>
7    <MyLayout>Redirecting to github!</MyLayout>
8  </Redirect>
9)

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:

1// NOTE: These are 3 separate examples, you can only choose one name per page
2redirect('to', {params: true})
3redirect('next', {params: true})
4redirect('url', {params: true})

Working with locales routes? Take a look at nextjs-redirect-locale.

Native redirects

There's now a native way of handling redirects on NextJS. You can read more about it here. 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) and other request-dependent redirects. It also allows you make client redirects with a custom layout.

License

MIT

Author


Pablo Varela

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to nextjs-redirect

Other packages similar to nextjs-redirect

nextjs-redirect

Installations

Pull Requests

1

22

2

19

Issues

0

6

6

Releases

Unable to fetch releases

Developer

Developer Guide

CommonJS

Yes

14.19.2

6.14.17

Statistics

Languages

Total Downloads

1,207,495

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

nextjs-redirect

Install

Usage

Status code (301, 302...)

Client side dynamic routes (as)

Static export

Custom UI component (HOC)

Redirect to URL from parameters

Related

Native redirects

License

Author

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10