Routing system
Zuby.js uses a file-based routing system.
This means that each page of your app is a file in the ./pages
directory
and Zub.js will automatically generate the routing for you.
Here’s the example of a simple Zuby.js app with the file-based routing system:
The naming convention for the files is very similar to the pages folder of Next.js
Pages and Handlers
The main purpose of each file in the ./pages
directory depends on its extension.
.jsx
or.tsx
- The pages.- These files will be rendered by the
JsxProvider
defined in the config file. - By default, all these files will generate new page that will be built for both client and server.
- These files will be rendered by the
.js
or.ts
- The handlers.- The handlers are universal files that allow to define API endpoints, middlewares and page props for both pre-rendered and not rendered pages.
- They always run on the server and can run before the page is rendered.
Static routes
Static routes are the routes that don’t have any dynamic segments in the path.
For example, the /about
route is a static route.
To create a static route, create a file with the same name as the route in the ./pages
directory.
For example, to create the /about
route, create the ./pages/about.jsx
file.
The index.jsx
works as a default route for the directory,
so the /about/index.jsx
file will generate the /about
route as well.
Examples:
./pages/about.jsx
- Will match only/about
path./pages/about/index.jsx
- Will match only/about
path
Dynamic routes
Dynamic routes are the routes that have dynamic segments in the path. Zuby.js supports various types of dynamic segments:
[id]
- Required param - This param matches any character except/
.[[id]]
- Optional param - This param matches any character except/
and can be empty.[...id]
- Catch-all param - This param matches any character including/
.[[...id]]
- Optional catch-all param - This param matches any character including/
and can be empty.
To create a dynamic route, create a file with the same name as the route in the ./pages
directory.
For example, to create the /users/[id]
route, create the ./pages/users/[id].jsx
file.
Examples:
./pages/users/[id]
- Will match/users/123
,/users/abc
but not/users/
paths./pages/users/[[id]]
- Will match/users/
,/users/123
and/users/
paths./pages/users/[...id]
- Will match/users/123
,/users/123/abc
but not/users/
paths./pages/users/[[...id]]
- Will match/users/
,/users/123
,/users/123/abc
and/users/123/abc/
paths
Order of routes
In case when multiple routes match the same path, Zuby.js will use the following order to determine which route should be used. The order is from the least to the most dynamic route.
- Static routes -
./pages/about.jsx
- The static routes have the highest priority. - Dynamic routes - Required param -
./pages/products/[id]
- Dynamic routes - Optional param -
./pages/products/[[id]]
- Dynamic routes - Catch-all param -
./pages/products/[...id]
- Dynamic routes - Optional catch-all param -
./pages/products/[[...id]]
- Dynamic routes - Default routes
Special file names
The following file names are reserved for template files in Zuby.js and cannot be used as file names for pages or handlers.
error.jsx
- The default page for the errors such as 404, 500, etc.app.jsx
- The default app component for all pages under the given directory.layout.jsx
- The default layout component for all pages under the given directory.innerLayout.jsx
- The default inner layout component for all pages under the given directory.entry.jsx
- The default entry point.index.jsx
- The default page for the given directory.
Ignored file names
The files prefixed with _
are ignored by Zuby.js and can be used for any other purpose.
For example, you can use the _utils.jsx
file to define some utility functions inside the pages folder.