Global CSS in Next.js

In this tutorial, you will learn how to apply Globals CSS in Next.js.

Globals CSS must be imported into the main layout file.

The location of the main Layout file is


app/globals.css

Import globals.css into Root Layout file.


import "./globals.css";

export const metadata = {
  title: "Next.js App",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Global CSS in Next.js – Interview Questions

Q 1: What is Global CSS?

Ans: CSS applied to the entire application.

Q 2: Where is Global CSS imported?

Ans: In app/layout.js.

Q 3: Can Global CSS be used with CSS Modules?

Ans: Yes.

Q 4: Is Global CSS required?

Ans: No, optional.

Q 5: What is a common use case?

Ans: Reset styles and typography.