November's Paddleball Marathon

    @yolkai/next-utils
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    next-utils

    A set of Next.js utilities to make your life easier.


    Actions Status version downloads MIT License

    All Contributors PRs Welcome Code of Conduct

    Tweet


    Overview

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

    Table of Contents

    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

    Install

    npm i @yolkai/next-utils

    DownloadsWeekly Downloads

    16

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    141 kB

    Total Files

    62

    Last publish

    Collaborators

    • ramaneekgill