Routing, Layouts, & Intercepting Routes
Relevant source files
The following files were used as context for generating this wiki page:
- src/app/layout.tsx
- src/app/@sheet/(.)talks/new/_components/create-talk-sheet-route.tsxtalks/new/_components/create-talk-sheet-route.tsx)
- src/app/talks/[speakerSlug]/[talkSlug]/page.tsx
- src/app/sitemap.ts
- AGENTS.md
- src/app/talks/new/page.tsx
- src/app/speakers/[speakerSlug]/page.tsx
- src/app/topics/[topicSlug]/page.tsx
The Tread Talks platform utilizes the Next.js App Router to manage page navigation, shared interface structures, and complex overlay behaviors. The system organizes routes by domain features and employs parallel routing to handle modal-like sheets that maintain the underlying page context.
The project follows a strict feature-based directory structure where src/app/ contains the routing logic and page definitions. It leverages Next.js 16 capabilities, including dynamic segments for speakers and talks, and specialized slots for intercepted UI components.
Sources: AGENTS.md:46-59, package.json:52
Root Layout and Parallel Routes
The RootLayout serves as the primary entry point for all pages. It defines the global HTML structure and wraps the application in necessary providers for authentication, analytics, and theming.
Parallel Route Slots
The layout implements a parallel route slot named sheet. This allows the application to render overlay content simultaneously with the main page content.
The diagram shows the hierarchical structure of the RootLayout and how it manages separate slots for main content and sheets.
Sources: src/app/layout.tsx:92-108
Layout Data Fetching Rules
To maintain performance and support static rendering, the project prohibits data fetching directly within layout.tsx files.
- Rule: Fetching data in a layout forces all children into dynamic rendering.
- Implementation: Components within the layout must fetch their own data internally rather than receiving it via layout props.
- Exception: Auth guards (e.g.,
requireAdminUser) are permitted in layouts as protected routes are inherently dynamic.
Sources: AGENTS.md:111-127
Intercepting Routes
Intercepting routes allow the application to load a route from another part of the application within the current layout. Tread Talks uses this primarily for creating and editing content via sheets without losing the user's current view.
Implementation: New Talk Sheet
The route /talks/new is intercepted using the (.) notation within the @sheet directory.
- Full Route:
src/app/talks/new/page.tsxrenders a standalone page for creating talks. - Intercepted Route:
src/app/@sheet/(.)talks/new/renders theCreateTalkSheetwhen the user navigates to/talks/newfrom within the app.
Sources: src/app/talks/new/page.tsx:7-35, src/app/@sheet/(.)talks/new/_components/create-talk-sheet-route.tsx:1-25
Dynamic Routing Structure
The application uses dynamic segments to handle various content types including talks, speakers, and topics.
| Route Type | URL Pattern | Source File |
|---|---|---|
| Talk Detail | /talks/[speakerSlug]/[talkSlug] | src/app/talks/[speakerSlug]/[talkSlug]/page.tsx |
| Speaker Profile | /speakers/[speakerSlug] | src/app/speakers/[speakerSlug]/page.tsx |
| Topic Detail | /topics/[topicSlug] | src/app/topics/[topicSlug]/page.tsx |
| Admin Create | /talks/new | src/app/talks/new/page.tsx |
Sources: src/app/talks/[speakerSlug]/[talkSlug]/page.tsx:13-18, src/app/speakers/[speakerSlug]/page.tsx:13-15, src/app/topics/[topicSlug]/page.tsx:15-22
Sitemap Generation
The sitemap.ts file dynamically generates SEO-friendly URLs for all content by fetching slugs from the Convex database.
The diagram illustrates the process of building the sitemap by aggregating static routes and dynamic entity paths.
Sources: src/app/sitemap.ts:7-68
Navigation and Layout Components
Specific layout wrappers organize the content structure for different page types.
- SidebarLayout: Used for pages requiring a sidebar, such as Topic and browse pages. It includes slots for
breadcrumb,content,header, andsidebar. - EditorialProfileLayout: Used for Speaker and Talk detail pages to provide a specialized profile view with hero sections.
- CenteredLayout: Used for simple content pages like "About" or "Beliefs".
Sources: src/app/topics/[topicSlug]/page.tsx:78-98, src/app/speakers/[speakerSlug]/page.tsx:88-106, src/app/about/page.tsx:49-54
Metadata Generation
Dynamic routes implement generateMetadata to provide page-specific titles and descriptions for SEO. For example, the Talk page derives its title from the talk's name and its description from the speaker's name or talk description.
Sources: src/app/talks/[speakerSlug]/[talkSlug]/page.tsx:20-43, src/app/topics/[topicSlug]/page.tsx:24-41
Conclusion
The routing and layout architecture in Tread Talks emphasizes a clean separation of concerns through feature-based organization. By combining Next.js App Router features like parallel and intercepted routes with Convex-backed dynamic segments, the platform maintains a fast, SEO-optimized, and context-aware user experience.