为什么将 app.js 更改为 app.tsx 会破坏我的 Next.js 项目？

Question

I'm trying to set up the Next.js framework with TypeScript, and I'm able to change my pages/index.js page to an pages/index.tsx page without issue, but when I attempt to change pages/_app.js to pages/_app.tsx , the project breaks with the error:

Error: ENOENT: no such file or directory, open /../../pages/_app.js

Why is this happening? I've installed TypeScript, @types/react, and @types/node

Answer 1

You may do the following

1. Close the script ie npm run dev
2. Delete .next folder
3. Run the app again ( npm run dev ). It should work now.

I think it is a problem with caching

Answer 2

Create an empty tsconfig.json file in the root of your project.

The then run run next dev

Answer 3

1. Stop the script from running ctrl+c (Mac) on terminal.

2. Write this in _app.tsx: export default function App({ Component, pageProps }: AppProps): JSX.Element { return <Component {...pageProps} /> }

3. Re-run the script npm run dev