next-universal-redirect

Higher order component to handle both client and server side redirecting with Next.js

Downloads
40
Stars
13

Next.js universal redirect

Higher order component to handle both client and server side redirecting with Next.js

Note: this package is made for Next.js 2.0+

Example: with-universal-redirect.now.sh

Installation

npm install --save next-universal-redirect

Usage

Create a _error.js file in the pages directory of your project

pages/_error.js:

import ErrorComponent from 'next/error'
import redirect from 'next-universal-redirect'

// This renders the default Next.js error/404 component
class Error extends React.Component {
  static getInitialProps ({ req, res, xhr, pathname }) {
    const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
    return { statusCode }
  }

  render () {
    return <ErrorComponent statusCode={this.props.statusCode} />
  }
}

// Create a map of redirects
const list = new Map()
list.set('/example', '/example2')

// Calling `rewrite(list)(<ComponentHere />)` will return a HOC that will match the provided list against incoming page requests and will redirect accordingly.
export default redirect(list)(Error)