Navigating Your Way: Next.js Routing Cheat sheet (App-Dir)

Routing is a crucial aspect of web development, determining how users navigate through your web application. In this guide, we'll explore various routing scenarios using a sample URL structure based on a Next.js application hosted at HTTP://localhost:3000. We'll discuss different routing scenarios and their significance within the context of Next.js.

Table of Contents

1. Root Route

   • Structure: /app/page.tsx
   • URL: /

2. API Route

   • Structure: /app/api/route.tsx
   • URL: /api

3. Normal Route

   • Structure: /app/about/page.tsx
   • URL: /about

4. Nested API Route

   • Structure: /app/about/route.tsx
   • URL: /api/about

5. Nested Route

   • Structure: /app/user/about.tsx
   • URL: /user/about

6. Dynamic Route

   • Structure: /app/[item]/page.tsx
   • URL: /slug

7. Nested Dynamic Route

   • Structure: /app/item/[item]/page.tsx
   • URL: /item/slug

8. Nested Dynamic Route (Multiple Parameters)

   • Structure: /app/[item]/[id]/page.tsx
   • URL: /slug/123

9. Nested Dynamic Route (Complex)

   • Structure: /app/item/[item]/id/[id]/page.tsx
   • URL: /item/slug/id/123

10. Catch-All Route

    • Structure: /app/about/[…join]/page.tsx
    • URLs: /about/hello/join/with/us /about/hello/join /about (Not Matched)

11. Catch-All Route (Optional)

    • Structure: /app/about/[[…join]]/page.tsx
    • URLs: /about/hello/join/with/us /about (Matched)

12. Private Route

    • Structure: /app/_loging/page.tsx
    • URL: No URL (Not accessible directly)

13. Group Route (No Effect)

    • Structure: /app/(profile)/(user)/sohanemon/page.tsx
    • URL: /sohanemon (No specific effect)

14. Parallel Routes

    • Structure: /app/@user/page.tsx, /app/@footer/page.tsx
    • URL: / (Both components parallel)

15. Intercept Route

    • Structure: /app/about/(..)details/page.tsx
    • URL: /about

16. Intercept Route (Multiple Intercepts)

    • Structure: /app/about/(..)(..)details/page.tsx
    • URL: /

17. Opengraph Images

    • Structure: /app/about/opengraph-image.png, /app/about/opengraph-image.ts, /app/about/twitter-image.png, /app/about/twitter-image.ts
    • URL: OG image for /about

18. SEO Routes

    • Structure: /app/about/sitemap.xml, /app/about/sitemap.ts, /app/about/robots.txt, /app/about/robots.ts
    • URL: Sitemap and robots text for /about

19. Rerendered Template

    • Structure: /app/template.tsx
    • URL: /

20. Error Routes

    • Structure: /app/error.tsx
    • URLs: /, /any, /any/thing

21. Fallback Page

    • Structure: /app/default.tsx
    • URL: /

22. Layout Page

    • Structure: /app/any/layout.tsx
    • URLs: /any, /any/thing

23. Loading UI

    • Structure: /app/loading.tsx
    • URL: /

24. Not Found UI

    • Structure: /app/not-found.tsx
    • URL: /URL/with/no/route

This guide specifically addresses routing within the context of a Next.js application, which offers dynamic routing capabilities and server-side rendering. Understanding how to configure and utilize Next.js routing effectively is essential for building dynamic and user-friendly web experiences. Whether you're working on a personal project or a complex web application, Next.js routing is a powerful tool to ensure smooth navigation for your users.