MENU

Global CSS

Global styles can be imported into any layout, page, or component within the app directory.

However, Next.js only supports global styles that truly apply across the entire application and persist throughout its lifetime. This is due to its reliance on React's built-in stylesheet handling, which doesn't remove styles when navigating between routes. As a result, it's generally recommended to use CSS Modules for component-specific styles instead of global styles.

To apply styles across all routes in your application, import the global.css stylesheet inside the root layout file (app/layout.js). Global stylesheets can have names other than 'global.css'.