npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nextjs-redirect

v6.0.1

Published

Redirect to any URL in NextJS both in client and server

Downloads

48,231

Readme

nextjs-redirect

Install

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:

// 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

Status code (301, 302...)

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

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:

redirect('/user/42/info')

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

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

import redirect from 'nextjs-redirect'

const Redirect = redirect('https://github.com/pablopunk')

export default () => (
  <Redirect>
    <MyLayout>Redirecting to github!</MyLayout>
  </Redirect>
)

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:

// 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.

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

| me | | ---------------------------------------------------------------------------- | | Pablo Varela |