next-app-builder

Custom App builder for Next.js.

What is a Custom `App`?

Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:

Persisting layout between page changes
Keeping state when navigating pages
Custom error handling using componentDidCatch
Inject additional data into pages
Add global CSS

For more details, see offical documentation.

Why a builder?

Generates a custom next App using middleware.

Before:

class CustomNextApp extends App {
  static async getInitialProps({ Component, ctx, router }) {
    const initialPageProps = await (Component.getInitialProps ? Component.getInitialProps : {});
    const data = await fetch(getDataForPage(router.pathname));
    return {
      pageProps: {
        ...initialPageProps,
        data
      }
    };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <SsrDataProvider data={pageProps.ssrData}>
        <LayoutComponent>
          <Component {...pageProps} />
        </LayoutComponent>
      </SsrDataProvider>
    );
  }
}

After:

const ssrDataMiddleware = {
  Component: SsrDataProvider,
  getInitialProps: ({ router }) => {
    const data = await fetch(getDataForPage(router.pathname));
    return { data };
  }
};

const layoutMiddleware = { Component: LayoutComponent };

nextAppBuilder({
  middleware: [ssrDataMiddleware, layoutMiddleware]
});

Installation

Install using Yarn:

yarn add @scacap/next-app-builder

or NPM:

npm install @scacap/next-app-builder --save

Usage

// pages/_app.js
import nextAppBuilder from '@scacap/next-app-builder';
import materialUiMiddleware from '../middlewares/material-ui';
import theme from '../theme';

export default nextAppBuilder({
  middleware: [materialUiMiddleware(theme)]
});

API

nextAppBuilder

Creates a custom app that should be the default export of pages/_app.js.

const CustomApp = appBuilder({
  middleware: [
    // middlewares here
  ]
});

middleware

An object containing the following fields:

name: a human readable identifier of middleware. Optional.
getInitialProps: a function which is executed before rendering. Used for blocking data requirements for every single page in your application, e.g. server side data fetching. Optional.
Component: the React component which is rendered in custom App. It's a wrapper component that will receive each page as children. Typically used for adding providers in the App level, e.g. css theme provider. Optional.
componentDidCatch: invoked when a descendant component throws an error. See more details in the React docs. Optional.

Caveats

Internally, you will be adding a custom getInitialProps in your App. This will disable Automatic Static Optimization in pages without Static Generation.