Next.js allows you to import CSS files from a JavaScript file.\nThis is possible because Next.js extends the concept of import beyond JavaScript.
To add a stylesheet to your application, import the CSS file within pages/_app.js.
For example, consider the following stylesheet named styles.css:
body {\n font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',\n 'Arial', sans-serif;\n padding: 20px 20px 60px;\n max-width: 680px;\n margin: 0 auto;\n}\nCreate a pages/_app.js file if not already present.\nThen, import the styles.css file.
import '../styles.css'\n\n// This default export is required in a new `pages/_app.js` file.\nexport default function MyApp({ Component, pageProps }) {\n return <Component {...pageProps} />\n}\nThese styles (styles.css) will apply to all pages and components in your application.\nDue to the global nature of stylesheets, and to avoid conflicts, you may only import them inside pages/_app.js.
In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.
\nIn production, all CSS files will be automatically concatenated into a single minified .css file.
Next.js supports CSS Modules using the [name].module.css file naming convention.
CSS Modules locally scope CSS by automatically creating a unique class name.\nThis allows you to use the same CSS class name in different files without worrying about collisions.
\nThis behavior makes CSS Modules the ideal way to include component-level CSS.\nCSS Module files can be imported anywhere in your application.
\nFor example, consider a reusable Button component in the components/ folder:
First, create components/Button.module.css with the following content:
/*\nYou do not need to worry about .error {} colliding with any other `.css` or\n`.module.css` files!\n*/\n.error {\n color: white;\n background-color: red;\n}\nThen, create components/Button.js, importing and using the above CSS file:
import styles from './Button.module.css'\n\nexport function Button() {\n return (\n <button\n type=\"button\"\n // Note how the \"error\" class is accessed as a property on the imported\n // `styles` object.\n className={styles.error}\n >\n Destroy\n </button>\n )\n}\nCSS Modules are an optional feature and are only enabled for files with the .module.css extension.\nRegular <link> stylesheets and global CSS files are still supported.
In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files.\nThese .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
Next.js allows you to import Sass using both the .scss and .sass extensions.\nYou can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.
Before you can use Next.js' built-in Sass support, be sure to install sass:
npm install sass\nSass support has the same benefits and restrictions as the built-in CSS support detailed above.
\nIf you want to configure the Sass compiler you can do so by using sassOptions in next.config.js.
For example to add includePaths:
const path = require('path')\n\nmodule.exports = {\n sassOptions: {\n includePaths: [path.join(__dirname, 'styles')],\n },\n}\nTo support importing .less or .styl files you can use the following plugins:
If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like:
\nError: Cannot find module 'less'\nIt's possible to use any existing CSS-in-JS solution.\nThe simplest one is inline styles:
\nfunction HiThere() {\n return <p style={{ color: 'red' }}>hi there</p>\n}\n\nexport default HiThere\nWe bundle styled-jsx to provide support for isolated scoped CSS.\nThe aim is to support \"shadow CSS\" similar to Web Components, which unfortunately do not support server-rendering and are JS-only.
\nSee the above examples for other popular CSS-in-JS solutions (like Styled Components).
\nA component using styled-jsx looks like this:
function HelloWorld() {\n return (\n <div>\n Hello world\n <p>scoped!</p>\n <style jsx>{`\n p {\n color: blue;\n }\n div {\n background: red;\n }\n @media (max-width: 600px) {\n div {\n background: blue;\n }\n }\n `}</style>\n <style global jsx>{`\n body {\n background: black;\n }\n `}</style>\n </div>\n )\n}\n\nexport default HelloWorld\nPlease see the styled-jsx documentation for more examples.
\nFor more information on what to do next, we recommend the following sections:
\n"},"__N_SSG":true}