Aplicación Personalizada

Next.js utiliza el componente App para inicializar las páginas. Puede 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
• Agregar CSS global

Uso

Para sobrescribir el App predeterminado, cree 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} />
}

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

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

Nota importante:

• Si su aplicación está en ejecución y agregó un App personalizado, deberá reiniciar el servidor de desarrollo. Solo es necesario si pages/_app.js no existía previamente.
• App no admite los métodos de obtención de datos de Next.js como getStaticProps o getServerSideProps.

getInitialProps con App

El uso de 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, considere adoptar gradualmente el App Router, que le permite obtener datos para páginas y diseños de manera más sencilla.

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' }
}