1
0
mirror of https://github.com/jbranchaud/til synced 2026-01-15 21:18:02 +00:00

Compare commits

...

3 Commits

Author SHA1 Message Date
Mohammad Alyetama
b4040e10e6 Merge bc767a0ad3 into f64257f02c 2024-11-30 13:30:12 +05:45
jbranchaud
f64257f02c Add Organize Pages In Route Groups as a Next.js TIL 2024-11-29 12:21:50 -06:00
Mohammad Alyetama
bc767a0ad3 Update bew cask command 2022-11-24 17:49:13 -05:00
3 changed files with 44 additions and 2 deletions

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..._
---
@@ -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)

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)

View File

@@ -6,7 +6,7 @@ convert it using the `ebook-convert` binary from `Calibre`.
First, install `Calibre`:
```bash
$ brew cask install calibre
$ brew install --cask calibre
```
Then convert your ePub using `ebook-convert`: