Setting Up Global Styles with Sass in Next.js 14

Demonstrate how to set up global styles using Sass in a Next.js 14 project, including the creation of a global stylesheet and its import into the custom _app.js component.
// 1. Install Sass by running this command in your Next.js project:
// npm install sass
Install Sass in your Next.js project to enable Sass support.
/* Example content for styles/globals.scss */
// 2. Create a Sass file with global styles, e.g., `styles/globals.scss`

html, body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

a {
  color: inherit;
  text-decoration: none;

* {
  box-sizing: border-box;
Create a global Sass stylesheet.
// 3. Import the global stylesheet in your custom _app.js
import '../styles/globals.scss';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
Import the global Sass stylesheet in your custom _app.js to apply the styles globally.