1 of 1

Custom `App`

src/pages/_app.tsx

Next.js WebApp Starter implements the following custom App component:

Let's break down this file.

Custom `App`

src/pages/_app.tsx

Next.js WebApp Starter implements the following custom App component:

Let's break down this file.

// import App from "next/app";
import type { AppProps /*, AppContext */ } from "next/app";
import Head from "next/head";
import I18n from "i18n/create-provider";
import App from "components/App";
import "styles/index.css";

function MyApp(props: AppProps) {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
        />
      </Head>
      <I18n
        requiredNS={props.pageProps.requiredNS}
        lng={props.pageProps.lng}
        lngDict={props.pageProps.lngDict}
      >
        <App {...props} />
      </I18n>
    </>
  );
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

//   return { ...appProps }
// }

export default MyApp;