Aplicación personalizada (Custom App)

Next.js utiliza el componente App para inicializar las páginas. Puedes sobrescribirlo y controlar la inicialización de la página para:

• Crear un diseño compartido entre cambios de página
• Inyectar datos adicionales en las páginas
• Añadir CSS global

Uso

Para sobrescribir el App por defecto, crea el archivo pages/_app como se muestra a continuación:

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

La propiedad Component es la page activa, por lo que cuando navegas entre rutas, Component cambiará a la nueva page. Por lo tanto, cualquier propiedad que envíes a Component será recibida por la page.

pageProps es un objeto con las propiedades iniciales que fueron precargadas para tu página mediante uno de nuestros métodos de obtención de datos, de lo contrario será un objeto vacío.

Nota importante

• Si tu aplicación está en ejecución y añades un App personalizado, necesitarás reiniciar el servidor de desarrollo. Solo es requerido si pages/_app.js no existía previamente.
• App no soporta los métodos de obtención de datos de Next.js como getStaticProps o getServerSideProps.

getInitialProps con App

Usar getInitialProps en App desactivará la Optimización Estática Automática para páginas sin getStaticProps.

No recomendamos usar este patrón. En su lugar, considera adoptar incrementalmente el App Router, que te permite obtener datos más fácilmente para páginas y diseños.

import App, { AppContext, AppInitialProps, AppProps } from 'next/app'

type AppOwnProps = { example: string }

export default function MyApp({
  Component,
  pageProps,
  example,
}: AppProps & AppOwnProps) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (
  context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx, example: 'data' }
}

import App from 'next/app'

export default function MyApp({ Component, pageProps, example }) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx, example: 'data' }
}