Next.js 如何配置全局 CSS？

推荐答案

在 Next.js 中配置全局 CSS 可以通过以下步骤实现：

1. 创建全局 CSS 文件：在项目的 styles 目录下创建一个全局 CSS 文件，例如 globals.css。

2. 导入全局 CSS 文件：在 _app.js 或 _app.tsx 文件中导入全局 CSS 文件。

   // _app.js 或 _app.tsx
   import '../styles/globals.css';
   
   function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />;
   }
   
   export default MyApp;

3. 确保 _app.js 存在：如果项目中没有 _app.js 或 _app.tsx 文件，可以在 pages 目录下创建一个。

本题详细解读

1. 全局 CSS 文件的作用

全局 CSS 文件用于定义整个应用程序中共享的样式。这些样式将应用于所有页面和组件，确保整个应用具有一致的外观和感觉。

2. _app.js 文件的作用

_app.js 是 Next.js 中的一个特殊文件，用于初始化页面。通过在这个文件中导入全局 CSS 文件，可以确保这些样式在所有页面加载时都被应用。

3. 为什么要在 _app.js 中导入全局 CSS？

在 _app.js 中导入全局 CSS 文件是因为这个文件是 Next.js 应用的入口点。所有页面和组件都会通过 _app.js 进行渲染，因此在这里导入全局 CSS 可以确保样式在整个应用中生效。

4. 其他注意事项

• 避免在组件中直接导入全局 CSS：在组件中直接导入全局 CSS 文件可能会导致样式重复加载或样式冲突。
• 使用 CSS Modules：对于组件级别的样式，推荐使用 CSS Modules，以避免全局样式的污染。

通过以上步骤，你可以在 Next.js 中成功配置全局 CSS，并确保样式在整个应用中一致应用。