Aplicación personalizada

Next.js utiliza el componente App para inicializar las páginas. Puedes sobrescribirlo y controlar la inicialización de páginas 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 predeterminado, 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 al navegar 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 precargadas para tu página mediante uno de nuestros métodos de obtención de datos, de lo contrario será un objeto vacío.

Importante

Si tu aplicación está en ejecución y añades un App personalizado, deberás reiniciar el servidor de desarrollo. Solo es necesario 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 este patrón. En su lugar, considera adoptar gradualmente 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' }
}

Uso

getInitialProps con App

On this page

`getInitialProps` con `App`