Home Custom _app.tsx in NextJS is not being used, although it is in correct location

Questions

Custom _app.tsx in NextJS is not being used, although it is in correct location

August 20, 2023

I have a problem with customizing NextJS – I have opted for using src folder, so my Pages are actually in src/pages and do work correctly. I have later added _app.tsx file as I want to use shared state with following path: src/pages/_app.tsx with following code:

export default function MyApp({ Component, pageProps }: AppProps) {
    debugger
    console.log('here')
    return <Component {...pageProps} />
}

Neither the debugger nor the log are fired. I have tried to delete the .node folder and restarting the server with no change in the behavior.

>Solution :

Your issue is because you have both app and pages together. For Next.js, you can use only one of these.

app router is the latest and recommended way to build Next.js apps.

For new applications, we recommend using the App Router. For existing applications, you can incrementally migrate to the App Router.

https://nextjs.org/docs/app

Since you already have the app structure, the pages/_app.tsx will be ignored.