5 Styling Pages and Components
This chapter covers:
- How style scoping in Next.js pages and components works
- Themes are styles that can be changed by updating Components dynamic values
- What happens with page styles when they’re rendered on the server
- How styles are guaranteed to be included once and unused styles are removed
- Defining styles in their own modules, outside of page and component modules
- Integrating styles from UI libraries with styles used in Next.js pages
Styles play a big role in any web application and Next.js apps are no exception. Once you have a large enough app, you’re going to want to make sure that your approach to implementing and maintaining styles is going to work for the long run and not to just get by for another week. Too often, we don’t really have an approach to styles – they’re thought of as an extension of the components that we build as part of the UI. In a way, this is true, styles exist to change the appearance of the components that we build. From another perspective, styles are a different animal when in terms of how the technology works and how we leverage CSS syntax to target page elements to change.
In this chapter, we’ll go on a deep dive into how styles work in Next.js applications. You have options, so you can often choose the approach that best suits your development preferences. The default tools for styles Next.js will covered in the most detail because they work without any changes or configuration changes.