Next.js 13 - app directory & routing
Tags: webdev, javascript, nextjs, programming
Published: 2023-02-22 19:22:17

In this article I will introduce you to new _app_ directory and new routing system in Next.js 13.

New routing system works in new _app_ directory. At the same time you can work in the new _app_ and old _pages_ directory but important to know that **routes across directories should not resolve to the same URL path. This may lead to errors.**

You can also collocate your own various files inside folders (components, tests, stylesheets and more)

---

## Component hierarchy within folder

![Example of component hierarchy from next.js 13 documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyoybgrnnuhvnas18xzl.jpeg)
<figcaption>Image from next.js 13 docs. https://beta.nextjs.org/docs/routing/fundamentals#component-hierarchy</figcaption>

---

## Defining routes

To define the route (single path of nested folders) you use folders. Files in folders are used to create UI that is shown for the route segment. As I mentioned in a previous article, the _page.js_ file makes the path publicly available.

**Good to know that you can also use _.jsx_ and _.tsx_ extensions for special files. Next.js 13 supports typescript out of the box!**

In the following examples, I will use typescript.

To create home page, create _page.tsx_ file in the _app_ directory and export the function. You can call the function whatever you want.

![Sample code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6mlja6yx7ubg8ytx51y.png)

Now you can visit http://localhost:3000/

To create nested routes you create new folder called _about_ inside _app_ directory. In _about_ folder create _page.tsx_ file to make the path publicly accessible.

![Sample code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzgq63i2scg9ld48d3rc.png)

Now you can visit http://localhost:3000/about

Remember that you can create other files in folders but only _page.tsx_ makes path accessible.
I will introduce you to other special files in future articles.

---

## Route groups

With route groups, you can create folders in the _app_ directory without affecting the URL.
You can create route groups by wrapping a folder's name in parenthesis: _(folderName)_.

Route groups can be used to:
- organize routes without affecting the URL structure
- opting-in specific route segments into a layout
- create multiple root layouts by splitting your application


Simple example from next.js 13 documentation:

![Example of route groups from next.js 13 documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m62josckwne6shlgma95.png)
<figcaption>Image from next.js 13 docs https://beta.nextjs.org/docs/routing/defining-routes#example-organize-routes-without-affecting-the-url-path</figcaption>


**Note**: _you can create different layout for each route group._
**Note**: _any route segment can optionally define its own layout. Layouts are shared across all pages in that segment. You can create layout only for shop routes group by adding layout on top of the shop group._


![Example of layout for single group from next.js 13 documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d41kgb4liiqnbzs7xstv.png)
<figcaption>Image from next.js 13 docs. https://beta.nextjs.org/docs/routing/defining-routes#example-opting-specific-segments-into-a-layout</figcaption>

Routes inside route group shouldn't resolve to the same URL, so you can't have about folder inside (marketing) route group and inside (shop) route group.

---

## Dynamic segments

If you want to create routes from dynamic data, and you don't know the names of the routes, you can use dynamic segments.
Dynamic segments are filled during request or pre-rendered at build time.

To create dynamic segment, wrap folder's name in square bracket: _[folderName]_. Dynamic segments are passed as the _params_ prop to _layout_, _page_, _route_ and _generateMetadata_ functions.

In the following example, I created dynamic segments for blog posts that I don't know the name of.

![Sample code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi9ptwa7c4go3dmv9hy5.png)

Now, you can visit http://localhost:3000/blog/nextjs13 and you should see:
_Blog with id: nextjs13_

---

That's all in this introduction to routing in Next.js 13. I hope that you can better understand basics of new routing and the _app_ directory.

If you want to know more about, for example _Catch-all Segments_ or if you want to expand your knowledge, I recommend Next.js 13 documentation.

**One more important thing**: _By default, components inside the app directory are Server Components. I will write more about Server Components later._

Thanks for reading!