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.jsis 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.jswill contain the wrapping layout for our pages. The
layout.jsfile 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.jsis very similar to
layout.jsjust 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.jsis the file that we will use to customize the
headof our page. Things such as setting page metatags, title and so on. As with
app/head.jswill be auto-generated at the first run if none is provided by us. This was previously done by the 'next/head' component
error.jsare 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/123. Of course, we can have anything else besides
[id], such as
[...folder_name_here]: they are called catch-all segments. If the previous
[id]will only be mapped to URLs like
/product/1a catch-all segment will get also URLs as
/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