pablopunk/nextjs-redirect

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

nextjs-redirect

Redirect to any URL in NextJS both in client and server

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

Pablo Varela

nextjs-redirect's Issues

document.location.pathname = path breaks redirection with search strings

try redirect('/foo?bar') from server side and client side and you'll see that they behave very differently

Exporting static does not work.

There seems to have been changes since #4 that broke this feature. To be specific, it's that getInitialProps now has calls to Router again once more.

    static async getInitialProps({ res, query }) {
      if (res?.writeHead) {
        let url = redirectUrl

        if (options?.params === true) {
          const param = redirectUrl
          if (!query[param]) {
            throw new Error(PARAMS_ERROR)
          }
          url = query[param]
        }

        res.writeHead(options?.statusCode ?? 301, { Location: url })
        res.end()
      } else if (options?.asUrl) {
        Router.push(redirectUrl, options.asUrl, { shallow: true })
      } else {
        Router.push(redirectUrl)
      }

      return {}
    }

Option to add styles

Hi

I know this might not be really necessary, but since redirection might take a second or so, I would like to apply some styles while it happens

Would you mind adding an option for that, please?

Support `as` argument on `Router.push`

This allows for client-side redirects to not require a full page reload.

Feature Request

Is it possible to redirect with a value from the original url?

Say the url looks like this:
website.com/redirect?key=value

and then the redirect becomes website.com/another-page?key=value

New official rewrites

There's now an official way of doing redirects on NextJS: https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers

I still prefer this package cause it's way simpler and more user friendly to me.

Still, there should be a paragraph on the README explaining that there is now a way of doing it natively.