Next.JS 14 updates: Streamlining Routes with the /app directory
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:
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:
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!