4 Reusable Page Components
This chapter covers:
- Implementing a layout component that is shared by every page in the application for consistent look and feel.
- Identifying repetitive code across pages and refactoring into shared components.
- Refactoring page content into smaller components to keep content organized and to simplify troubleshooting.
- Using scoped styles to in shared components to simplify styles.
- Using the Head component from Next.js to populate the document title and other document meta data.
- Optimizing shared components to make sure page content always renders fast.
The first step in creating a Next.js application is to implement page content and to link those pages together so that you can navigate them. This was the focus of chapter 3. Once this is done, we can take a step back and think about how we can improve the quality of our page content. We want to remove repetitive code where possible and do so in a way that promotes maintainability for the long run.
The goal of this chapter is to walk you through the process of taking page content that was implemented without concern for readability, modularity, etc., and improve upon it. A key strength of Next.js is its developer experience. To get the most of it, we have to do our part and simplify our content to stay organized.