In Next.js, we can organize our routes into groups without affecting the URL path. This can be done by wrapping a folder's name in parentheses, like (group).

Let's say we have an e-commerce application, we might have different sections like "electronics", and "clothing". Even though these sections have different URLs, we can group them in our code using route groups.

app/ ├─ (electronics)/ │ ├─ electronic1/ │ │ ├─ page.tsx │ ├─ electronic2/ │ │ ├─ page.tsx ├─ (clothings)/ │ ├─ clothing1/ │ │ ├─ page.tsx │ ├─ clothing2/ │ │ ├─ page.tsx

In this structure, the URL paths will be /electronic1, /electronic2, /clothing1, /closthin2 etc, regardless of the category they belong to.

While route groups don't affect the URL structure, they still allow us to create different layouts for each group by adding a layout.js file inside their folders.