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

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

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

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.

Example Usage

Code

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

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.

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

Example Usage

Code

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

Example Usage

Code

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

Example Usage

Code

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

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.

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.

Yolk AI

!!TO BE FILLED!!

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

MIT