1
0
mirror of https://github.com/jbranchaud/til synced 2026-07-07 17:40:34 +00:00

Compare commits

...

4 Commits

Author SHA1 Message Date
Bob Conan 2de1c6dd3c Merge 5615da920f into f64257f02c 2024-11-29 13:22:24 -05:00
jbranchaud f64257f02c Add Organize Pages In Route Groups as a Next.js TIL 2024-11-29 12:21:50 -06:00
Bob Conan 5615da920f Update README.md, fix typos 2024-11-15 16:16:31 -06:00
BobConanDev c60c63f554 Updated README.md, fix typo(s) 2024-11-15 16:42:57 -05:00
2 changed files with 45 additions and 3 deletions
+4 -3
View File
@@ -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..._
---
@@ -191,7 +191,7 @@ _1520 TILs and counting..._
- [Aliasing An Ansible Host](devops/aliasing-an-ansible-host.md)
- [Allow Cross-Origin Requests To Include Cookies](devops/allow-cross-origin-requests-to-include-cookies.md)
- [Allow HTTPS Through Your UFW Firewall](devops/allow-https-through-your-ufw-firewall.md)
- [Check For Cached Site Assocation File For iOS](devops/check-for-cached-site-association-file-for-ios.md)
- [Check For Cached Site Association File For iOS](devops/check-for-cached-site-association-file-for-ios.md)
- [Check The Status of All Services](devops/check-the-status-of-all-services.md)
- [Check The Syntax Of nginx Files](devops/check-the-syntax-of-nginx-files.md)
- [Connect To An RDS PostgreSQL Database](devops/connect-to-an-rds-postgresql-database.md)
@@ -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)
@@ -729,7 +730,7 @@ _1520 TILs and counting..._
- [Check If Clusters Are Upgrade Compatible](postgres/check-if-clusters-are-upgrade-compatible.md)
- [Check If The Local Server Is Running](postgres/check-if-the-local-server-is-running.md)
- [Check If User Role Exists For Database](postgres/check-if-user-role-exists-for-database.md)
- [Check Table For Any Oprhaned Records](postgres/check-table-for-any-orphaned-records.md)
- [Check Table For Any Orphaned Records](postgres/check-table-for-any-orphaned-records.md)
- [Checking Inequality](postgres/checking-inequality.md)
- [Checking The Type Of A Value](postgres/checking-the-type-of-a-value.md)
- [Clear The Screen In psql](postgres/clear-the-screen-in-psql.md)
+41
View File
@@ -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)