Next.js:app文件被绕过

Question

我正忙于使用Next.js作为框架制作一个web应用程序。我想创建一个自定义的_app组件来包装页面，但它似乎被完全绕过了。

我的_app.tsx文件如下所示：

import type { AppProps } from "next/app";
import { Fragment } from "react";
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<Fragment>
<div>Hello world</div>
<Component {...pageProps} />
</Fragment>
);
}

我在组件上方添加了div，只是为了测试它是否会出现。导入全局样式也没有任何作用。

我的next.config.js是这样的：

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig

我的包.json是这样的：

{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"sass": "^1.54.9"
},
"devDependencies": {
"@types/node": "18.7.16",
"@types/react": "18.0.19",
"@types/react-dom": "18.0.6",
"eslint": "8.23.0",
"eslint-config-next": "12.3.0",
"typescript": "4.8.3"
}
}

最后，我的tsconfig.json:

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"@components/*": ["src/common/components/*"],
"@styles/*": ["src/common/styles/*"],
"@modules/*": ["src/modules/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

如果有任何帮助，我将不胜感激。

谢谢。

Answer 1

Next.js有时似乎表现得很奇怪。幸运的是，我设法弄明白了。

出于某种原因，导出函数不起作用，但导出常量匿名函数起作用。

我这样更改了文件，由于某种原因它开始工作了。

import type { AppProps } from "next/app";
import { Fragment } from "react";
import '@styles/globals.scss';
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<Fragment>
<div>Hello world</div>
<Component {...pageProps} />
</Fragment>
);
};
export default MyApp;

希望我知道确切的原因，但我会接受的。