Next 13 – Special files and folders naming conventions in the app folder

DanielDecember 10, 2022January 11, 2023

Let's see what special file names and folder naming patterns we can use in the app folder added in NextJs 13.

Right from the start, NextJs followed a "convention over configuration" paradigm, using reserved naming conventions for most common use cases. This decrease the complexity and the number of decisions we need to take as programmers.

As a side note, each file I will mention here with a js extension can also have a tsx extension if you want to use typescript in your project.

Reserved file names in the app folder

Let's take a look at the reserved file names:

• page.js is the main entry point for each folder. This file will contain the main content of the page that will be served from that folder. Wrote this short getting guide about it here
• layout.js will contain the wrapping layout for our pages. The layout.js file is autogenerated in the root app folder if we don't provide one. These layouts preserve state and can also be nested or shared. Before having the layout we were using the _app file
• template.js is very similar to layout.js just that this one will not preserve the state as it always remounts on navigation. Added a more in-depth post about templates in NextJs.
• head.js is the file that we will use to customize the head of our page. Things such as setting page metatags, title and so on. As with app/layout.js a default app/head.js will be auto-generated at the first run if none is provided by us. This was previously done by the 'next/head' component
• layout.js and error.js are both used in data fetching to show the intermediate states. Wrote this guide about how to use the loading file in NextJs
• not-found.js used for rendering the error screen for a not found item

Special naming conventions for folders in NextJs 13 app folder

Alongside the reserved names of the above files, we also have some special naming conventions for the folders we pun in /app:

• [id]: these are the query parameters for routing. Using them we can have paths such as product/1, product/2, or product/123. Of course, we can have anything else besides [id], such as [slug] or [title];
• [...folder_name_here]: they are called catch-all segments. If the previous [id] will only be mapped to URLs like /product/1 a catch-all segment will get also URLs as /product/1/2 or /product/1/2/3/test. Wrote more details about them here.
• (folder_name_here): they have also named route groups and they can be used to organize routes without affecting the URL or to create shared layouts in NextJs. They don't need to contain a page.js;