The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Next.js 16 Routing Explained — A Complete Beginner's Guide
A full walkthrough of App Router routing patterns in Next.js 16 — static and dynamic routes, nested layouts, route groups, catch-all segments, parallel routes, and intercepting routes for modals — with working examples for each pattern rather than just definitions. Published on DevStacked, my developer blog covering practical Next.js and SaaS implementation guides.
The route map graphic does a nice job turning an otherwise invisible system into something scannable—clear grouping without losing the sense of nested structure. Showing parallel and intercepted routes in the same walkthrough should make the modal patterns much easier to grasp.
Thanks! That was exactly the goal, make the route structure easier to scan, especially the parallel + intercepted route combination. Glad the graphic helped make the modal pattern clearer!
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Website for an app that posts to 17 apps at once. Open source now, one HTML file. Live link and code in the reply 👇
That's really great idea to save time and growing your business it will be so helpful ❤️❤️
Great job Kazi🔥🔥
Exploring a clean, modern SaaS dashboard UI. Focused on simple layouts, smooth interactions, and a better user experience 🚀
i had to like this, it got my attention, very nice build mate.
🧪 Just shipped Labpath — a 19-route Diagnostic Lab & Patient Portal Next.js template!
Most healthcare and clinic templates stop at a static landing page and a generic contact form. With Labpath, I wanted to design and engineer the complete diagnostic patient journey end-to-end using Next.js 16, React 19, TypeScript 5, and Tailwind CSS 4.
Here’s what I built:
🧬 2-Pane Biomarker Assay Workbench (/portal) — Interactive patient dossier where patients filter assays by clinical panel and inspect calibrated reference-range rails, plain-English interpretations, and 3-visit longitudinal history.
📅 5-Step Requisition Booking Wizard (/book) — Deep-linkable scheduling supporting both Draw Center appointments and Home Phlebotomy visits, complete with intake validation and .ics calendar export.
🔎 Faceted Test Catalog & Package Matrix (/tests, /packages) — 22 diagnostic assays across 7 clinical categories with URL-synced filters + 6 bundled checkup packages with a sticky comparison matrix.
♿ Clinical-Grade Accessibility — Strictly verified against WCAG 2.2 AA contrast standards across desktop and mobile with 27 Vitest unit tests and 36 Playwright E2E checks.
Swipe through the shots below to see the clinical monochrome + surgical-blue design system in action. Would love to hear your thoughts! 👇
Really solid scope for a template. I work on a healthcare analytics platform, and reference-range rails with plain-English interpretations are exactly what helps patients actually understand their results. URL-synced filters plus 36 Playwright E2E checks is a great touch too....