NextJS Styling and UI Syllabus

Styling and UI syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Styling and UI in NextJS, not a summary of it.

1. 1

   CSS and Sass

   3 topics

   • Global Styles
   • CSS Modules
   • Sass Integration
2. 2

   Styled Components

   3 topics

   • Setup and Configuration
   • Creating Styled Components
   • Theming with Styled Components
3. 3

   Tailwind CSS

   3 topics

   • Setup and Configuration
   • Utility-First CSS
   • Customizing Tailwind

Styling and UI flashcards for NextJS

24 of 50 cards from the Styling and UI deck — real questions with worked answers.

1. In a Next.js App Router project, where must global CSS be imported so it applies to the entire application?

   In the root layout file (app/layout.tsx or .js). Global stylesheets can only be imported in the root layout, not in individual pages or components (in the App Router).

2. What is the conventional filename for the global stylesheet in a Next.js project?

   app/globals.css (App Router) or styles/globals.css imported in pages/_app.js (Pages Router).

3. In the Next.js Pages Router, which single file is allowed to import a global CSS file, and why?

   pages/_app.js (the custom App component). Global CSS affects every route, so Next.js restricts it to _app to avoid conflicts and ordering issues.

4. What error does Next.js throw if you import a plain global CSS file into a regular page or component (Pages Router)?

   A 'Global CSS cannot be imported from files other than your Custom App' error, instructing you to move the import to pages/_app.js or convert it to a CSS Module.

5. What is a CSS Module in Next.js and how is it named?

   A CSS file whose name ends in .module.css (e.g., Button.module.css). Its class names are automatically scoped locally to the component that imports it, preventing name collisions.

6. How do you consume a class from a CSS Module in a React/Next.js component?

   Import it as an object (e.g., import styles from './Button.module.css') and reference classes as properties, such as className={styles.primary}.

7. How does Next.js guarantee CSS Module class names are unique across the app?

   At build time it transforms each local class name into a unique hashed identifier (e.g., 'primary' becomes 'Button_primary__a1B2c'), scoping styles to that module.

8. Unlike global CSS, where can CSS Modules be imported in a Next.js app?

   Anywhere: in any component or page. Because their scope is local, there is no risk of global conflicts, so Next.js allows them everywhere.

9. What is Sass and what two syntaxes does it provide?

   Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor. Its two syntaxes are SCSS (.scss, CSS-like with braces and semicolons) and the older indented syntax (.sass).

10. What single step is required to enable Sass support in a Next.js project?

    Install the sass package (e.g., npm install --save-dev sass). Next.js has built-in Sass support once the compiler is present; no extra config is needed.

11. Can Sass be used together with CSS Modules in Next.js, and how are such files named?

    Yes. Name the file with the .module.scss (or .module.sass) extension to get locally scoped, preprocessed styles (a SCSS Module).

12. Name three core features Sass adds on top of plain CSS.

    Variables ($color), nesting of selectors, mixins/functions, partials with @use/@import, and inheritance via @extend.

13. In Sass, how do you declare and use a variable for a primary color?

    Declare with a dollar sign: $primary: #0070f3; then reference it, e.g., color: $primary;.

14. Which Next.js config option lets you customize Sass, such as adding include paths or a global prepend?

    The sassOptions key inside next.config.js (e.g., sassOptions: { includePaths: [...], prependData: '@use ...' }).

15. What is the recommended modern Sass rule for including another partial, and how does it differ from @import?

    @use loads the partial with a namespace and loads it only once, avoiding duplication and global scope pollution. @import is deprecated because it dumps everything into the global namespace and can load files multiple times.

16. What is styled-components and which CSS-in-JS technique does it use?

    A CSS-in-JS library that uses tagged template literals to write actual CSS scoped to a React component, generating unique class names at runtime.

17. Write the basic pattern for creating a styled button component with styled-components.

    const Button = styled.button`\n color: white;\n background: blue;\n`; then render <Button>Click</Button>.

18. What is the styled-components tagged-template syntax used to style an existing component?

    styled(Component)`...css...` — e.g., const FancyLink = styled(Link)`color: red;`. It wraps and extends the target component's styling by passing className.

19. How do you make styled-components render different styles based on a prop?

    Interpolate a function that receives props inside the template literal, e.g., background: ${props => props.$primary ? 'blue' : 'gray'};.

20. Why do modern styled-components use a $ prefix on custom props (transient props) like $primary?

    Transient props (prefixed with $) are consumed by styled-components for styling only and are NOT forwarded to the underlying DOM element, preventing invalid HTML attribute warnings.

21. What extra setup does styled-components require in the Next.js App Router for correct server-side rendering?

    A style registry using ServerStyleSheet / useServerInsertedHTML in a client 'use client' component, plus enabling the compiler.styledComponents flag in next.config.js so styles are collected during SSR and no hydration mismatch occurs.

22. Which next.config.js compiler flag enables built-in SWC support for styled-components in Next.js?

    compiler: { styledComponents: true }.

23. In styled-components, what does the createGlobalStyle helper do?

    It creates a component that injects global CSS (like resets or html/body styles) into the document when rendered, since styled-components are normally scoped.

24. What is theming in styled-components and which component provides the theme?

    Theming supplies a shared theme object (colors, fonts, spacing) to all styled components via the <ThemeProvider theme={theme}> context wrapper.

See more Styling and UI flashcards →

Planning Styling and UI for NextJS

Styling and UI (NextJS) FAQ