Dynamic Page Routing
Relevant source files
The following files were used as context for generating this wiki page:
Dynamic Page Routing in this project facilitates the automated generation and delivery of content-driven pages based on data stored in Sanity CMS. By utilizing Next.js App Router features like catch-all segments and dynamic route parameters, the system maps CMS "slugs" to specific frontend layouts for "Pages" and "Projects."
Routing Architecture
The application uses a dual-track dynamic routing system. Custom pages are handled at the root level via [slug], while portfolio items are nested under a dedicated projects/[slug] path. This structure allows for distinct visual presentations and metadata handling based on the document type fetched from the Sanity Content Lake.
Core Routing Components
| Component | Path | Purpose |
|---|---|---|
| Project Router | app/(personal)/projects/[slug]/page.tsx | Handles dynamic project detail pages. |
| Page Router | app/(personal)/[slug]/page.tsx | Handles generic dynamic pages (e.g., About, Contact). |
| Studio Router | app/studio/[[...index]]/page.tsx | A catch-all route for the Sanity Studio authoring environment. |
Sources: [app/(personal)/projects/[slug]/page.tsx:1-15](), [app/(personal)/[slug]/page.tsx:1-10](), [app/studio/[[...index]]/page.tsx:1-20]()
Data Flow for Dynamic Routes
When a user navigates to a dynamic URL, the system executes a sequence to fetch content, generate SEO metadata, and render the UI.
The diagram above illustrates the request-to-render pipeline for a dynamic project route.
Sources: [app/(personal)/projects/[slug]/page.tsx:55-65](), [sanity/lib/queries.ts:35-46](https://github.com/ivanm696/sanity-next-js-personal-website/blob/HEAD/sanity/lib/queries.ts#L35-L46)
Static Generation and Optimization
The project utilizes generateStaticParams to pre-render dynamic routes at build time, ensuring optimal performance and SEO.
Static Parameter Resolution
Both pages and projects implement a generateStaticParams function that queries Sanity for all defined slugs. This allows Next.js to know exactly which dynamic paths exist before a user ever requests them.
export async function generateStaticParams() {
const {data} = await sanityFetch({
query: slugsByTypeQuery,
params: {type: 'project'},
stega: false,
perspective: 'published',
})
return data
}
Sources: [app/(personal)/projects/[slug]/page.tsx:43-51](), [app/(personal)/[slug]/page.tsx:30-38]()
Schema and Query Integration
Dynamic routing is tightly coupled with the Sanity schema definitions and GROQ queries.
Slug Definition
The slug field in Sanity is configured to be unique and typically sources its value from the title field.
| Field | Type | Configuration |
|---|---|---|
| name | slug | Unique identifier for the URL path. |
| options.source | title | Automatically generates slug from the title. |
| validation | rule.required() | Ensures every document is routable. |
Sources: [sanity/schemas/documents/page.ts:16-24](https://github.com/ivanm696/sanity-next-js-personal-website/blob/HEAD/sanity/schemas/documents/page.ts#L16-L24), [sanity/schemas/documents/project.ts:22-31](https://github.com/ivanm696/sanity-next-js-personal-website/blob/HEAD/sanity/schemas/documents/project.ts#L22-L31)
Query Logic
The routing relies on specific GROQ queries defined in sanity/lib/queries.ts to retrieve data by the URL segment.
- pagesBySlugQuery:
*[_type == "page" && slug.current == $slug][0] - projectBySlugQuery:
*[_type == "project" && slug.current == $slug][0]
Sources: [sanity/lib/queries.ts:25-33](https://github.com/ivanm696/sanity-next-js-personal-website/blob/HEAD/sanity/lib/queries.ts#L25-L33), [sanity/lib/queries.ts:35-48](https://github.com/ivanm696/sanity-next-js-personal-website/blob/HEAD/sanity/lib/queries.ts#L35-L48)
Content Linking and Resolvers
To maintain consistency between the Studio and the frontend, the project uses a resolver to map document types to their respective URL patterns.
The resolve.ts file acts as a central configuration for the Presentation Tool, ensuring that when an editor clicks a document in Sanity Studio, they are redirected to the correct dynamic route on the frontend.
Sources: [sanity/plugins/resolve.ts:1-25](https://github.com/ivanm696/sanity-next-js-personal-website/blob/HEAD/sanity/plugins/resolve.ts#L1-L25)
Conclusion
Dynamic Page Routing in this architecture provides a scalable way to manage content. By combining Next.js dynamic segments with Sanity’s flexible schema and GROQ querying, the system ensures that every new document published in the CMS is immediately accessible via a predictable and SEO-optimized URL structure.