Overview

React Higher-Order Components for use with Next.js, enabling simple, server-side-render-compatible configuration of functionality such as:

• Apollo Client + react-apollo
• Sentry
• LinguiJS
• react-cookies

Table of Contents

• Installation
• Usage
  • appWithApolloClient
  • appWithSentry
  • appWithLingui
  • appWithCookies
  • withAuthentication
  • checkAuthenticated
  • redirect
  • RouterContext
• Other Solutions
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install @yolkai/next-utils

Note

NOTE: Using any of these Higher-Order-Components will disable Automatic Static Optimization (statically built pages), since the Higher-Order-Component forces every page to implement getInitialProps.

🔮 Apollo Client

appWithApolloClient

Example Usage

Code

React higher-order component (HoC) which wraps the App component and:

• Performs the page's initial GraphQL request on the server, and serializes the result to be used as the initial Apollo state once the client mounts.
• Passes the Apollo client to the wrapped App component.

🔭 Sentry

Example Usage

appWithSentry

Code

React higher-order component (HoC) which wraps the App component and captures any exceptions thrown in getInitialProps and emits them to Sentry.

initSentry

Code

Initializes Sentry and creates a captureException function which can be used with appWithSentry. This function is unique and adds extra Next.js information to captured exceptions.

📚 LinguiJS

appWithLingui

Example Usage

Code

React higher-order component (HoC) that wraps the App component in LinguiJs's I18nProvider component.

It will then detect:

1. The best language to use based on the incoming request
2. Load the catalog for that language, and supply it to the I18nProvider

🍪 React Cookies

appWithCookies

Example Usage

Code

React higher-order component (HoC) which wraps the App component and passes a cookies access object to the App component.

🔏 Authentication

makeRedirectPage

Example Usage

Code

Next.js Page Component which redirects to the given URL using the given HTTP status code.

redirect

Example Usage

Code

A small utility function helpful when redirecting users both on the server and the client.

Testing

RouterContext

Example Usage

Code

A React Context object which is very helpful when using Next.js with preview tools such as Storybook. Allows for components to use <Link> / Router provided by an ancestor component without errors.

Other Solutions

Some of these solutions are based on the examples found the official Next.js examples repo.

If you see an improvment please make a pull request.

Used in Production By

Yolk AI

Contributors

!!TO BE FILLED!!

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT