nextjs-routing-in-depth

preview possible here

codesandbox

---

my learning

• file and folder structure is tery importante for nextjs, one should really learn those

this took me hours to understand

🚨 LEARNING VERY IMPORTANT 🚨

⚠️ Next.js Parallel Routes & Caching Issue

When using parallel routes (@slot) and intercepted routes (.), Next.js caches routing structures aggressively, which can lead to:

• Routes not resolving properly
• Intercepted routes ((.)folder) failing to load
• modal slots appearing as undefined
• Page updates not reflecting in development mode

🛠 Fix: Clear Next.js Cache

If changes to parallel or intercepted routes aren’t working, always try this:

rm -rf .next
npm run dev

making routes load in parallel

• Parallel routes allow multiple independent components to be rendered inside a shared layout.
• Folders prefixed with @ (e.g., @archive, @latest) define parallel routes.
• They must be wrapped inside a layout.js, which receives them as props.

/app/archive/
 ├── layout.js   # Wraps parallel routes
 ├── page.js     # Optional main archive page
 ├── @archive/
 │   ├── page.js # Renders inside { archive }
 ├── @latest/
     ├── page.js # Renders inside { latest }

optional catch-all segements

docs

Catch-all routes handle dynamic segments in a flexible way:

• [...slug] → Required catch-all, matches /archive/2024 or /archive/2024/01, but not /archive.
• [[...slug]] → Optional catch-all, matches /archive, /archive/2024, or /archive/2024/01.

Use params.slug?.[index] to access segments safely.

const Page = ({ params }) => {
  const year = params.slug?.[0] || "All";
  const month = params.slug?.[1] || "All";

  return <p>Year: {year}, Month: {month}</p>;
};
export default Page;

This allows /archive/2024/01, /archive/2024, and /archive.

intercepting routes

nextjs interceptiong routes docs

(.) to match segments on the same level
(..) to match segments one level above
(..)(..) to match segments two levels above
(...) to match segments from the root app directory

in our words and understanding

• this enables us to differ from internal routes to external link calls, so ecternal calls get handlede differently like in our example and will reroute away from the fullscreen image
• see /news/[newsSlug]()image for naming convention
  • (.)<sibling route name> when the sibling folders name is identical
  • (..)<sibling route name> when the sibling folders name is identical and nested route
  • (<silbing folder name>) is also fine

route groups

• are is a folder that is not resolved as path, should be top level in /app
• nameing convention and folder structure convention is

       |/(content)               --> will not create a route !!
       |  |/pages folders        --> like normal routing
       |  |--page.js             --> your routename       
       |  |--layout.js           --> the routes layout
       |  |-layout.js            --> the route groups layout, name it **RootLayout**
       |  |-not-found.js         --> the not-found for this route group segment
       |/(theOtherRouteGroup)    --> will not create a route !!
       |     | .. follow content paradigm here
       |-global.css
       |....