next-utils
A set of Next.js utilities to make your life easier.!Actions Statusbuild-badgebuild !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
!PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc
!Tweettwitter-badgetwitter
Overview
React Higher-Order Components for use with Next.js, enabling simple, server-side-render-compatible configuration of functionality such as:Table of Contents
- appWithApolloClient - appWithSentry - appWithLingui - appWithCookies - withAuthentication - checkAuthenticated - redirect - RouterContextInstallation
This module is distributed via npmnpm which is bundled with nodenode and should be installed as one of your project'sdependencies
: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 implementgetInitialProps
.🔮 Apollo Client
appWithApolloClient
Example UsageCode
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 UsageappWithSentry
CodeReact higher-order component (HoC) which wraps the App component and captures any exceptions thrown in
getInitialProps
and emits them to Sentry.initSentry
CodeInitializes 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 UsageCode
React higher-order component (HoC) that wraps the App component in LinguiJs's
I18nProvider
component.It will then detect:
- The best language to use based on the incoming request
- Load the catalog for that language, and supply it to the
I18nProvider
🍪 React Cookies
appWithCookies
Example UsageCode
React higher-order component (HoC) which wraps the App component and passes a cookies access object to the App component.
🔏 Authentication
makeRedirectPage
Example UsageCode
Next.js Page Component which redirects to the given URL using the given HTTP status code.
redirect
Example UsageCode
A small utility function helpful when redirecting users both on the server and the client.
Testing
RouterContext
Example UsageCode
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 requestprs.
Used in Production By
Yolk AIContributors
!!TO BE FILLED!!This project follows the all-contributors specification. Contributions of any kind welcome!