Not long ago, the Next.JS team unveiled the Next.JS 14 update, packed with an array of enhancements to elevate the development experience. In this installment, we'll delve into what I believe to be its standout feature: the /app Directory. This game-changing addition made its debut in a stable form back in version 13.3, prompting me to undertake an engaging exploration of this update.

Let's kick off by delving into how it changes the way we structure our projects.

Typically, in a Next.JS project where we are not using the /app directory, we usually separate pages from components, placing them in separate folders (for example, /pages and /components).

The fundamental folder structure in a Next.js project lacking the /app directory would resemble the following:

/pages
  - home.tsx
  - contact-us.tsx
/components
  - Button.tsx
  - Input.tsx
Let's momentarily ignore the rest of the folders to better appreciate that we have separated the routable components from the non-routable ones here.

What are routable and non-routable components?

Routable: These components can be used as a site or web application route. For example, a component located at /pages/about-us.tsx would be displayed as the /about-us route in our browser.

Non-routable: These components can only be used within the code, such as a reusable button.

So far, everything is fine, but let's imagine a project that has many pages and components. Let's try to organize it, and it might look like this:

pages/
  home.tsx
  contact-us.tsx
  blog/
    index.tsx
    [slug].tsx

components/
  pages/
    home/
      Header.tsx
      InformationSection.tsx
      Card.tsx
    contact-us/
      form/
        Input.tsx
This approach allows us to keep our pages separate from our components while also preventing Next.JS from attempting to use the components as routes for creating web pages.

Now that we've seen how the project structure would look without the /app directory, let's create the same structure with the new organization approach, preventing Next.JS from considering our components as pages.

app/
  home/
    page.tsx ===> routable: /
    ui/
      Header.tsx
      InformationSection.tsx
      Card.tsx

  contact-us/
    page.tsx ===> routable: /contact-us
    form/
        Input.tsx

  blog/
    page.tsx ===> routable: /blog
    [slug]/
      page.tsx ===> routable: /blog/my-new-post

As we can see, the new structure organizes the entire project management according to the website routes.

How does Next.js know if a file is a page or a regular component if they are both in the same folder?

To inform Next.js that this new component is a page, simply name it page.tsx or page.jsx. This will create a route starting from /app to the last parent folder of page.tsx or page.jsx.

Examples:

  • /app/home/page.tsx will be the / route in the browser.
  • /app/contact-us/page.tsx will be the /contact-us route in the browser.
  • /app/blog/page.tsx will be the /blog route in the browser.
  • /app/blog/[slug]/page.tsx will be the /blog/my-new-post route in the browser.

It is important to note that when using the /app directory, Next.js automatically recognizes and routes pages based on their location in the folder structure.

Now, by having page.tsx or page.jsx, we indicate to Next.js what is a page and what is not. This allows us to have our components in the same folder as the page, which is much more convenient when working on a new page or editing an existing one, without having to search through its clone folder inside /components.

What additional new features does Next.js 14 have?

Actually, that's not all. This update introduces new features including Partial Prerendering, Dynamic Components, Static Components, loading.tsx, error.tsx, not-found.tsx, and Layouts, among others.

We will discuss these features in future posts, as it is impossible to cover all of them in a single post.

Stay connected with us on our social media platforms to stay updated on the latest blog posts in the "Next.JS 14 updates" series!