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 herelayout.js
will contain the wrapping layout for our pages. Thelayout.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 filetemplate.js
is very similar tolayout.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 thehead
of our page. Things such as setting page metatags, title and so on. As withapp/layout.js
a defaultapp/head.js
will be auto-generated at the first run if none is provided by us. This was previously done by the 'next/head' componentlayout.js
anderror.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 asproduct/1
,product/2
, orproduct/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 apage.js
;
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.