Skip to content

Next.js API Routes

Jump to bottom
Filip Najdovski edited this page Jul 7, 2023 · 1 revision

Next.js uses File System Routing where names of directories define the url structure of the web app.

Getting Started

In Next.js 13, the routes are defined in the /app directory. In previous versions, they were defined in the /pages directory. Massive.

Routes start after the /app directory. For example a page located at /app/about.tsx will be accessible at /about and pages located at /app/Contact/Home/index.tsx will be located at /Contact/Home, etc.

Dynamic Routing

When you don't know the exact name of the next segment in the route, or you want to parse extra parameters, we have Dynamic Routes to save the day.

To create a dynamic route, we wrap the name of your directory or page in [square brackets]. For example:

  • /app/shop/[shopName].tsx -> /shop/coffee will have parameter 'coffee'

To include many parameters, we precede the name of the route with elipses ('...'). These are called 'Catch-all Segments'. Example:

  • /app/shops/[...shopNames] -> /shop/coffee/tea will have parameters 'coffee' and 'tea'.
Clone this wiki locally