diff --git a/README.md b/README.md index cbaa46d..11e172d 100644 --- a/README.md +++ b/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) diff --git a/nextjs/organize-pages-in-route-groups.md b/nextjs/organize-pages-in-route-groups.md new file mode 100644 index 0000000..c9c066f --- /dev/null +++ b/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)