Styling

The presenter describes enabling Next.js’s experimental CSS flag to import stylesheets directly. They show adding a global stylesheet through `_app.js`, which also lets developers keep shared layout or state across page changes.

Sass adds features such as nesting, partials, and mixins, and the example uses a Next.js plugin to enable Sass imports. The presenter also introduces built-in styled-jsx and favors styled-components for writing component-scoped CSS with dynamic styles and themes.

The setup uses `_app.js` to wrap pages in a ThemeProvider and `_document.js` to collect styles for server rendering. A `.babelrc` can extend Next.js’s Babel preset with the styled-components plugin, enabling server-side rendering and readable display names for debugging.

The presenter recommends applying mobile styles first, then using a `min-width` media query to increase an article’s font from 12 to 18 pixels above 768 pixels. They show Chakra UI’s responsive array syntax as another way to set font sizes at mobile, medium, and larger breakpoints.

Chakra’s Box component accepts CSS properties as React props, while its ThemeProvider and CSS reset provide shared theme values and consistent browser defaults. Chakra’s breakpoints can be customized, reducing the need to write repeated media queries by hand.