Next Js中使用全局自定义样式sheet

Question

要导入 css 文件，我可以在 'pages/_app.js' 中执行以下操作：

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

很简单。根据我的理解，这个覆盖了全局 css.

的 App 组件

文档说：

Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:

然而，当我第一次使用 Next Js 初始化应用程序时，我得到了 pages/index.js 的根页面这包含我的启动页面。这里没有 app.js 文件或 App 组件。

我对 App 组件如何集成到常规 index.js 文件感到困惑。

我的问题是： pages/_app.js 是如何自动环绕 pages/index.js 的？或者我是否必须将 myApp 组件导入 pages/index.js 文件？

Answer 1

My question is: Is the pages/_app.js automatically some how wrapped around pages/index.js? Or do I have to import the myApp component into the pages/index.js file?

是的，next.js 自动使用 _app.js 中定义的组件包装您的应用程序。如果您没有该文件，next.js 使用其默认值。

在 _app.js 中定义 App 组件时，您需要遵循特定的模式。您可以在此处查看应如何设置自定义 App 组件：https://nextjs.org/docs/advanced-features/custom-app

Next Js中使用全局自定义样式sheet

Using global custom style sheet in Next Js

next.js