Application personnalisée

Next.js utilise le composant App pour initialiser les pages. Vous pouvez le remplacer et contrôler l'initialisation des pages pour :

• Créer une mise en page partagée entre les changements de page
• Injecter des données supplémentaires dans les pages
• Ajouter du CSS global

Utilisation

Pour remplacer le App par défaut, créez le fichier pages/_app comme indiqué ci-dessous :

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 prop Component correspond à la page active, donc lorsque vous naviguez entre les routes, Component changera pour la nouvelle page. Ainsi, toutes les props que vous envoyez à Component seront reçues par la page.

pageProps est un objet contenant les props initiales qui ont été préchargées pour votre page par l'une de nos méthodes de récupération de données, sinon c'est un objet vide.

Bon à savoir

• Si votre application est en cours d'exécution et que vous ajoutez un App personnalisé, vous devrez redémarrer le serveur de développement. Ceci n'est nécessaire que si pages/_app.js n'existait pas auparavant.
• App ne prend pas en charge les méthodes de récupération de données de Next.js comme getStaticProps ou getServerSideProps.

getInitialProps avec App

L'utilisation de getInitialProps dans App désactivera l'Optimisation statique automatique pour les pages sans getStaticProps.

Nous ne recommandons pas d'utiliser ce modèle. Envisagez plutôt d'adopter progressivement le routeur App, qui vous permet de récupérer plus facilement des données pour les pages et les mises en page.

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