Add Organize Pages In Route Groups as a Next.js TIL

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1520 TILs and counting..._
+_1521 TILs and counting..._
 
 ---
 
@@ -686,6 +686,7 @@ _1520 TILs and counting..._
 - [Fetch Does Not Work In API Serverless Function](nextjs/fetch-does-not-work-in-api-serverless-function.md)
 - [Make Environment Variable Publicly Available](nextjs/make-environment-variable-publicly-available.md)
 - [Match Middleware On Groups Of Paths](nextjs/match-middleware-on-groups-of-paths.md)
+- [Organize Pages In Route Groups](nextjs/organize-pages-in-route-groups.md)
 - [Precedence Of Dot Env Files](nextjs/precedence-of-dot-env-files.md)
 - [Push A Route With A URL Object](nextjs/push-a-route-with-a-url-object.md)
 - [Redirect An Unauthorized User](nextjs/redirect-an-unauthorized-user.md)

nextjs/organize-pages-in-route-groups.md

@@ -0,0 +1,41 @@
+# Organize Pages In Route Groups
+
+With the Next.js App Router we can organize pages without affecting the URL
+path structure by nesting those directories and pages within a _Route Group_. A
+Route Group is directory where the name is surrounded by parentheses, e.g.
+`/(symbols)`.
+
+For instance, in my [Ruby Operator
+Lookup](https://www.visualmode.dev/ruby-operators) project, I have the
+following structure:
+
+```bash
+$ exa --true src/app/ruby-operators
+
+src/app/ruby-operators
+├── (symbols)
+│  ├── ampersand
+│  │  └── page.mdx
+│  ├── arbitrary-keyword-arguments
+│  │  └── page.mdx
+│  ├── asterisk
+│  │  └── page.mdx
+│  ├── at-symbol
+│  │  └── page.mdx
+│  ├── backtick
+│  │  └── page.mdx
+│  ├── ...
+│  └── underscore
+│     └── page.mdx
+├── client-layout.tsx
+├── layout.tsx
+├── page.tsx
+└── wrapper.ts
+```
+
+I'm able to organize all the different symbols and operators under a separate
+directory `/(symbol)/`. That makes development easier. However, the end result
+routing still has each symbol located directly under `/ruby-operators/`, e.g.
+`/ruby-operators/ampersand`.
+
+[source](https://nextjs.org/docs/app/getting-started/project-structure#route-groups)