3 Your First Next.js Pages

 

This chapter covers:

  • Sketching out the first pages of your application and focusing on high-level concerns
  • Getting the foundational page structure, content, and links in place
  • Using data to populate page content and provide insight into future API designs

Next.js can be used as a tool to aid in the design of your app. Because it is highly focused on developer experience, it is often faster to just implement pages to test your ideas, rather than spending huge amounts of time designing on paper what the app should look like. Next.js facilitates immediate feedback on real code, so it’s best to leverage this ability and get our application to where we want it to be, faster.

However, before diving right into page implementation, it doesn’t hurt to put together a sketch of what the basic concept of your application would look like if broken down into pages. In this chapter, we’ll talk about the page decomposition of a small massaging app. You’ll learn what to focus on versus what to ignore during the initial phases of Next.js app development. We’ll then walk through the initial page implementation of the messenger app and we’ll look at how the initial page content guides the design of APIs that you’ll implement later in your project.

3.1       Visualizing Page Organization

3.1.1   Sketching Pages and Links

3.1.2   Where to Spend Your time

3.2       Implementing and Linking Pages

3.2.1   Basic Page Component Template

3.2.2   Home Page

3.2.3   Message and Friend List Pages

3.2.4   Message and Friend Detail Pages

3.2.5   New Message and New Friend Pages

3.3       Making Content Dynamic with Data

3.3.1   Getting Initial Page Properties

3.3.2   Initial Home Page Properties

3.3.3   Initial Properties for Message and Friend List Pages

3.3.4   Initial Properties for Message and Friend Detail Pages

3.4       Summary