App Directory

Let's begin by discussing the primary change in Next 13: The app Directory.

In the pages directory, simplicity is key. Any file you create within this directory automatically becomes a page, encompassing all the necessary page code. Here's an example showcasing a website utilizing the pages directory.

And here is the equivalent structure in the app directory:

The primary change is that you can no longer have a single page.tsx file representing a page. Instead, you must create a folder for each page. And the code for each page resides within the corresponding folder's page.tsx file. Additionally, Next.js performs various caching optimizations throughout the application. Here are just a few examples of the optimizations that Next.js handles behind the scenes:

• Navigation caching (opens in a new tab), More caching (opens in a new tab)
• Caching fetch requests (opens in a new tab)
• Per-request Caching (opens in a new tab), More on this in the next section (Data fetching)

So these levels of optimizations are just not easily achievable with the traditional page router.

Page-Scoped Components

In addition, you have the flexibility to declare components and styles specific to each page within its respective folder, rather than the conventional components folder. It's worth noting that while this approach may make code sharing more challenging, there are cases where organizing components that are exclusively used by a particular page within the same folder can be more logical and intuitive.

Naming Conventions

Working with multiple files named page.tsx can be frustrating as it becomes difficult to determine which specific page you are editing. To address this, a recommended approach is to create a separate file named after the page you are working on. For example:

import { AboutPage } from './about-page'
 
export default function Page() {
  return (
    <AboutPage />
  )
}

Terminology

Finally let’s familiarize ourselves with the terminology used in the official Next.js documentation. It's important to understand these terms as they will be frequently referenced throughout the documentation. Let's take a quick look at each term:

Component Tree

The component tree is a concept used to represent a hierarchical structure. It helps visualize the relationship between parent and child components, similar to a folder structure. Here are the key terms related to the component tree:

• Tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.
• Subtree: Part of a tree, starting at a new root (first) and ending at the leaves (last).
• Root: The first node in a tree or subtree, such as a root layout.
• Leaf: Nodes in a subtree that have no children, such as the last segment in a URL path.

URL Anatomy

Understanding the anatomy of a URL is crucial when working with Next.js. Here are the relevant terms:

• URL Segment: Part of the URL path delimited by slashes.
• URL Path: Part of the URL that comes after the domain (composed of segments).

By grasping these terminologies related to the component tree and URL anatomy, you'll have a solid foundation for understanding and navigating the Next.js documentation effectively.

Route Segments

In Next.js, each folder in a route represents a route segment. These route segments are then mapped to their corresponding segments in a URL path. It defines the structure of the routing system.