[Next.js] Override the Default App Component in Next.js

You can override the default App component in Next.js by creating a _app.tsx file and defining your own App component. By doing this, you can use global styles, pass custom props, and more.

pages/_app.tsx

import type {AppProps} from "next/app";

const App = ({Component, pageProps}: AppProps) => {
    // whatever you pass to pageProps object, will be passed to Children component as well
    pageProps.title = "This is override Home page title";
    return <Component {...pageProps} />
}
    
export default App;

 

pages/Home.tsx

const Home ({title}: {title: string}) => {
    return (
        <div>
            <!-- will receive title from _app.js -->
            <h1>{title}</h1>
        </div>
    ) 
}

export default Home;