Next.js _app.js example

When using Next.js you’ll most likely need to override the global App component to get access to some features like persisting state, or global layouts. This can be done by creating a file_app.js directly in the ./pages/ folder. If this file exists, then Next.js will use this instead of the default App.

A basic example of _app.js

A basic example of overriding the default App in with no extended functionality:

// _app.js
const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default MyApp

The Component prop is the page view that will be rendered. We can use this to pass our own props to or wrap with layout/context components. The pageProps prop is the props that each page will receive when rendered. It is important to remember to pass these along.

Using _app.js with a custom layout

An example of wrapping App with a custom layout component.

// _app.js
import Layout from "../components/layouts/"

const MyApp = ({ Component, pageProps, auth }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

With this example any additional components that are used in _app.js will be rendered on every page. this is a good way to do custom layouts without having to wrap each page component in your /pages directory.

Using _app.js with Providers

An example of wrapping _app.js with a theme provider.

// _app.js
import { ThemeProvider } from "@chakra-ui/core"
import Layout from "../components/layouts/"
import theme from "../components/theme"

const MyApp = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme={theme}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ThemeProvider>
  )
}

export default MyApp

Wrapping Component with Providers allows the persisting of data across pages and deeply nested components. In this example our theme style data is accessible anywhere within our app.

Using _app.js with Auth Provider

An example of wrapping _app.js with an auth provider. This method will require each page render to be server-side rendered.

// _app.js
import App from "next/app"
import { ThemeProvider } from "@chakra-ui/core"
import { AuthProvider, getUser } from "../components/helpers/AuthProvider"
import Layout from "../components/layouts/Layout"
import theme from "../components/theme"

const MyApp = ({ Component, pageProps, auth }) => {
  return (
    <ThemeProvider theme={theme}>
      <AuthProvider myAuth={auth}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AuthProvider>
    </ThemeProvider>
  )
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const auth = await getUser(appContext.ctx)
  return { ...appProps, auth: auth }
}

export default MyApp

The getInitialProps method is run on page render which allows an auth token to be grabbed and authenticated. Access to our auth data is now available anywhere within the application.

Note: Per the Next.js docs, using getInitialProps in _app.js disables the ability to perform automatic static optimization, causing every page in your app to be server-side rendered.